:root {
/* Light theme — Trackier (clean light, indigo accent) */
--bg: #f5f6fb;
--card: #ffffff;
--line: #e7e9f2;
--line-strong: #d9dcea;
--text: #141a2e;
--muted: #5a6474;
--faint: #8b95a8;
--acc: #6d5efc;
--acc-hover: #5a4bf0;
--acc-soft: #eeecff;
--surface: #ffffff;
--surface-2: #f7f9fc;
--ok: #12a35a;
--ok-bg: #e7f8ef;
--warn: #d9800a;
--warn-bg: #fdf3e6;
--radius: 16px;
--shadow: 0 1px 2px rgba(20, 26, 46, .04), 0 8px 24px rgba(20, 26, 46, .05);
--font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Sora", "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { height: 100%; }
/* Off-screen trap for password managers (do not use display:none — Chrome skips those). */
.autofill-trap {
position: absolute;
left: -10000px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
body {
margin: 0;
min-height: 100%;
font-family: var(--font);
background:
radial-gradient(920px 420px at 6% -12%, rgba(47, 107, 255, .14), transparent 58%),
radial-gradient(720px 380px at 96% 0%, rgba(18, 163, 90, .07), transparent 52%),
radial-gradient(640px 360px at 50% 100%, rgba(47, 107, 255, .05), transparent 55%),
var(--bg);
background-attachment: fixed;
color: var(--text);
font-size: 13px;
font-weight: 500;
letter-spacing: -.01em;
-webkit-font-smoothing: antialiased;
}
/* Fixed topnav: sticky was scrolling away on long edit forms (not a cache issue). */
a { color: var(--acc); text-decoration: none; }
.topnav {
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
height: 64px;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border-bottom: 1px solid rgba(15, 20, 25, .1);
box-shadow:
0 1px 0 rgba(255, 255, 255, 1) inset,
0 1px 0 rgba(15, 20, 25, .03),
0 10px 28px rgba(15, 20, 25, .1),
0 2px 6px rgba(15, 20, 25, .04);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
overflow: visible;
}
.topnav::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: linear-gradient(
90deg,
rgba(47, 107, 255, .55) 0%,
rgba(47, 107, 255, .18) 28%,
rgba(47, 107, 255, .04) 58%,
transparent 82%
);
pointer-events: none;
}
body:has(> .topnav) { padding-top: 72px; }
a.crm-brand { text-decoration: none; color: var(--text); }
.crm-brand {
display: flex; align-items: center; gap: 9px;
padding: 4px 8px 4px 4px; border-radius: 14px;
flex: 0 0 auto;
transition: background .18s, transform .18s;
}
.crm-brand:hover { background: rgba(47, 107, 255, .07); }
.crm-logo {
width: 34px; height: 34px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(145deg, #6a97ff 0%, var(--acc) 52%, var(--acc-hover) 100%);
border: 0;
color: #fff; font-family: var(--font-display);
font-weight: 700; font-size: 12px; letter-spacing: -.03em;
box-shadow: 0 8px 18px rgba(47, 107, 255, .28), inset 0 1px 0 rgba(255,255,255,.28);
}
.crm-brand-text {
font-family: var(--font-display);
font-size: 13px; font-weight: 600; letter-spacing: -.035em;
white-space: nowrap;
}
.crm-nav-cluster {
display: flex; align-items: center; gap: 8px;
padding: 0;
border-radius: 0;
background: transparent;
border: 0;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: rgba(15,20,25,.18) transparent;
}
.crm-nav-cluster::-webkit-scrollbar { height: 3px; }
.crm-nav-cluster::-webkit-scrollbar-thumb {
background: rgba(15,20,25,.16);
border-radius: 99px;
}
.nav-group {
display: inline-flex;
align-items: center;
gap: 2px;
flex: 0 0 auto;
padding: 3px;
border-radius: 13px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow:
0 1px 0 rgba(255, 255, 255, .85) inset,
0 1px 2px rgba(15, 20, 25, .03);
}
.nav-group-label {
flex: 0 0 auto;
align-self: stretch;
display: inline-flex;
align-items: center;
margin-right: 2px;
padding: 0 9px 0 10px;
border-right: 1px solid rgba(15, 20, 25, .08);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(15, 20, 25, .42);
white-space: nowrap;
user-select: none;
line-height: 1;
}
.nav-combo {
display: inline-flex;
align-items: center;
gap: 0;
flex: 0 0 auto;
margin: 0 1px;
padding: 1px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(47, 107, 255, .07), rgba(47, 107, 255, .03));
border: 1px solid rgba(47, 107, 255, .14);
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
}
.nav-combo .navbtn {
height: 30px;
padding: 0 8px;
border-radius: 8px;
gap: 5px;
}
.nav-combo .navbtn + .navbtn {
position: relative;
margin-left: 1px;
}
.nav-combo .navbtn + .navbtn::before {
content: "";
position: absolute;
left: -1px;
top: 7px;
bottom: 7px;
width: 1px;
background: rgba(47, 107, 255, .18);
pointer-events: none;
}
.nav-combo:has(.navbtn.on) {
border-color: rgba(47, 107, 255, .28);
background: linear-gradient(180deg, rgba(47, 107, 255, .1), rgba(47, 107, 255, .04));
}
.nav-sep { display: none; }
.nav-group:empty { display: none; }
.pix-hub-tabs {
display: flex;
gap: 2px;
margin: 0 0 14px;
padding: 3px;
width: fit-content;
max-width: 100%;
border-radius: 11px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.pix-hub-tab {
border: 0;
background: transparent;
padding: 7px 15px;
min-height: 32px;
border-radius: 8px;
font: inherit;
font-size: 13px;
font-weight: 650;
color: var(--muted);
cursor: pointer;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
button.pix-hub-tab:hover,
.pix-hub-tab:hover {
color: var(--text);
background: rgba(255, 255, 255, .55);
filter: none;
}
.pix-hub-tab.is-on {
background: var(--surface);
color: var(--text);
box-shadow:
0 1px 2px rgba(15, 23, 42, .07),
0 0 0 1px rgba(15, 23, 42, .04);
}
button.pix-hub-tab.is-on:hover,
.pix-hub-tab.is-on:hover {
background: var(--surface);
color: var(--text);
filter: none;
}
.navbtn {
position: relative;
height: 34px; padding: 0 9px; border: 0; border-radius: 10px;
background: transparent; color: var(--muted); cursor: pointer;
font: inherit; font-weight: 600; box-shadow: none;
display: inline-flex; align-items: center; gap: 6px;
text-decoration: none; white-space: nowrap;
flex: 0 0 auto;
transition: background .16s, color .16s, box-shadow .16s, transform .16s;
}
a.navbtn { color: var(--muted); }
.navbtn:hover {
background: rgba(255, 255, 255, .92);
color: var(--text);
box-shadow: 0 1px 2px rgba(15, 20, 25, .05);
}
.navbtn.on {
background: var(--surface);
color: var(--acc);
box-shadow:
0 1px 2px rgba(15, 20, 25, .06),
0 0 0 1px rgba(47, 107, 255, .2),
0 4px 12px rgba(47, 107, 255, .12);
}
.navbtn.on::after { display: none; }
.navico {
width: 18px; height: 18px; flex: 0 0 18px;
display: grid; place-items: center;
color: inherit; opacity: .78;
transition: opacity .16s, color .16s;
}
.navico svg {
width: 16px; height: 16px; display: block;
overflow: visible;
}
.navbtn:hover .navico { opacity: 1; }
.navbtn.on .navico { opacity: 1; color: var(--acc); }
.nav-label {
font-size: 12px; letter-spacing: -.02em;
font-weight: 600;
}
.nav-short { display: none; }
/* Fit all nav items on typical laptop widths */
@media (max-width: 1500px) {
.nav-full { display: none; }
.nav-short { display: inline; }
.nav-group-label { display: none; }
.nav-group { padding: 3px; gap: 1px; }
.crm-nav-cluster { gap: 6px; }
.navbtn { padding: 0 8px; gap: 5px; }
.acc-sub { display: none; }
}
@media (max-width: 1100px) {
.acc-meta { display: none; }
.acc-btn {
padding: 3px !important;
gap: 0 !important;
border-radius: 999px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
.acc-btn .avatar { width: 32px; height: 32px; flex: 0 0 32px; }
.acc-chev { display: none; }
}
.land-page .list-head {
margin-bottom: 8px;
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.land-page .list-title h1 { margin-bottom: 8px; }
.land-page .muted { color: var(--muted); font-size: 13px; margin: 0 0 8px; line-height: 1.45; }
.land-sec { padding: 18px 20px 20px; margin-bottom: 14px; }
.land-sec h2 { margin: 0 0 12px; font-size: 16px; letter-spacing: -.02em; }
.land-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.land-card {
display: flex; flex-direction: column; gap: 6px;
padding: 14px 14px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface-2);
color: var(--text);
text-decoration: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.land-card:hover {
border-color: color-mix(in srgb, var(--acc) 35%, var(--line));
background: var(--surface);
box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.land-card b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.land-card code {
font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--muted);
}
.top-right {
margin-left: auto; display: flex; align-items: center; gap: 8px;
flex: 0 0 auto; position: relative; z-index: 2; overflow: visible;
}
.acc { position: relative; flex: 0 0 auto; overflow: visible; }
button.acc-btn,
.acc-btn {
appearance: none;
-webkit-appearance: none;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 9px !important;
width: auto !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 4px 10px 4px 4px !important;
margin: 0 !important;
border: 1px solid color-mix(in srgb, var(--acc) 16%, var(--line)) !important;
border-radius: 14px !important;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%) !important;
color: var(--text) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, .95) inset,
0 1px 2px rgba(15, 20, 25, .03),
0 4px 12px rgba(47, 107, 255, .06) !important;
cursor: pointer;
font: inherit !important;
font-weight: 600 !important;
line-height: 1.2 !important;
white-space: nowrap;
transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
button.acc-btn:hover,
.acc-btn:hover {
border-color: color-mix(in srgb, var(--acc) 34%, var(--line)) !important;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, .95) inset,
0 2px 4px rgba(15, 20, 25, .04),
0 6px 16px rgba(47, 107, 255, .1) !important;
filter: none;
}
.acc.open .acc-btn {
border-color: color-mix(in srgb, var(--acc) 42%, var(--line-strong)) !important;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, .9) inset,
0 0 0 3px rgba(47, 107, 255, .12),
0 6px 16px rgba(47, 107, 255, .1) !important;
filter: none;
}
.acc-btn .avatar {
width: 34px; height: 34px; flex: 0 0 34px; font-size: 11px;
border: 0;
background: linear-gradient(145deg, #6a97ff 0%, var(--acc) 52%, var(--acc-hover) 100%);
color: #fff;
box-shadow:
0 4px 10px rgba(47, 107, 255, .28),
inset 0 1px 0 rgba(255, 255, 255, .28);
}
.acc-meta {
display: flex; flex-direction: column; justify-content: center;
gap: 3px; min-width: 0; text-align: left; padding: 0 2px 0 0;
}
.acc-meta b {
color: var(--text); font-weight: 650; font-size: 13px; letter-spacing: -.02em;
font-family: var(--font-display);
max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
line-height: 1.15;
}
.acc-sub {
display: block;
font-style: normal;
font-size: 11px;
font-weight: 550;
color: var(--faint);
line-height: 1.15;
max-width: 132px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.acc-bal {
display: inline-flex;
align-items: center;
align-self: flex-start;
height: 18px;
padding: 0 7px;
font-size: 11px;
font-weight: 700;
letter-spacing: -.015em;
font-variant-numeric: tabular-nums;
color: #067647;
line-height: 1;
background: var(--ok-bg);
border: 1px solid color-mix(in srgb, var(--ok) 18%, transparent);
border-radius: 999px;
}
.acc-chev {
flex: 0 0 auto; color: var(--faint); display: grid; place-items: center;
margin-left: 1px;
width: 18px; height: 18px;
border-radius: 6px;
background: rgba(47, 107, 255, .06);
transition: transform .16s ease, color .12s ease, background .12s ease;
}
.acc-btn:hover .acc-chev { color: var(--acc); background: rgba(47, 107, 255, .1); }
.acc.open .acc-chev { transform: rotate(180deg); color: var(--acc); background: rgba(47, 107, 255, .12); }
.avatar {
width: 34px; height: 34px; border-radius: 999px;
background: linear-gradient(145deg, #6a97ff 0%, var(--acc) 52%, var(--acc-hover) 100%);
color: #fff;
display: grid; place-items: center;
font-family: var(--font-display);
font-size: 11px; font-weight: 700; letter-spacing: -.03em;
border: 0;
flex: 0 0 34px;
box-shadow:
0 4px 10px rgba(47, 107, 255, .22),
inset 0 1px 0 rgba(255, 255, 255, .28);
}
.acc-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 120;
width: 272px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow:
0 18px 40px rgba(16, 24, 40, .14),
0 4px 12px rgba(16, 24, 40, .05);
overflow: hidden;
animation: accIn .15s ease;
text-align: left;
}
.acc-menu.hidden { display: none !important; }
@keyframes accIn {
from { opacity: 0; transform: translateY(-6px) scale(.98); }
to { opacity: 1; transform: none; }
}
.acc-menu-hd {
display: flex; align-items: center; gap: 12px;
padding: 12px 12px 11px;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border-bottom: 1px solid var(--line);
}
.acc-menu-av {
width: 40px; height: 40px; flex: 0 0 40px; font-size: 12px;
box-shadow:
0 6px 14px rgba(47, 107, 255, .26),
inset 0 1px 0 rgba(255, 255, 255, .28);
}
.acc-menu-who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.acc-menu-who b {
font-size: 14px; font-weight: 750; letter-spacing: -.02em; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-menu-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.acc-tag {
display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
border-radius: 999px; font-size: 11px; font-weight: 650;
background: var(--surface); color: var(--muted);
}
.acc-tag.bal { background: var(--ok-bg); color: #067647; }
.acc-tag.admin { background: var(--surface); color: var(--acc); }
.acc-menu-sec {
padding: 8px 12px 2px;
font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--faint);
}
button.acc-item,
a.acc-item,
.acc-item {
appearance: none !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 8px 12px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: inherit !important;
text-align: left !important;
text-decoration: none !important;
cursor: pointer;
font: inherit !important;
font-weight: 500 !important;
line-height: 1.2 !important;
white-space: normal !important;
box-shadow: none !important;
}
button.acc-item:hover,
a.acc-item:hover,
.acc-item:hover {
background: var(--surface) !important;
filter: none;
color: inherit !important;
}
.acc-item-ico {
flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
display: grid; place-items: center;
background: var(--surface); color: var(--muted);
}
.acc-item:hover .acc-item-ico { background: var(--acc-soft); color: var(--acc); }
.acc-item-txt {
min-width: 0; flex: 1 1 auto;
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.acc-item-txt b {
display: block; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.acc-item-txt i {
display: block; font-style: normal; font-size: 11px; font-weight: 500; color: var(--faint);
}
.acc-menu-foot {
padding: 8px; border-top: 1px solid var(--line); background: var(--surface-2);
}
button.acc-logout,
.acc-logout {
appearance: none !important;
-webkit-appearance: none !important;
width: 100% !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 0 12px !important;
margin: 0 !important;
border: 1px solid #fecdca !important;
border-radius: 10px !important;
background: var(--surface) !important;
color: #b42318 !important;
font: inherit !important;
font-size: 13px !important;
font-weight: 650 !important;
cursor: pointer;
box-shadow: none !important;
}
button.acc-logout:hover,
.acc-logout:hover {
background: var(--surface) !important;
border-color: #f97066 !important;
filter: none;
}
.acc-modal {
position: fixed; inset: 0; z-index: 120;
display: grid; place-items: center; padding: 20px;
}
.acc-modal.hidden { display: none !important; }
.acc-modal-backdrop {
position: absolute; inset: 0; background: rgba(16, 24, 40, .42);
backdrop-filter: blur(2px);
}
.acc-modal-card {
position: relative; z-index: 1;
width: min(400px, 100%);
background: var(--surface); border-radius: 16px;
border: 1px solid var(--line);
box-shadow: 0 24px 56px rgba(16, 24, 40, .22);
padding: 20px 20px 16px;
}
.acc-modal-card h3 {
margin: 0 0 6px; font-size: 17px; font-weight: 750; letter-spacing: -.02em;
}
.acc-modal-sub {
margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.4;
}
.acc-field {
display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;
font-size: 12px; font-weight: 650; color: var(--muted);
}
.acc-field input {
height: 40px !important; padding: 0 12px !important;
border: 1px solid var(--line-strong) !important; border-radius: 10px !important;
background: var(--surface) !important; font: inherit !important; font-size: 13px !important;
color: var(--text) !important; width: 100% !important;
}
.acc-field input:focus {
border-color: #b7c9ff !important;
box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
outline: none;
}
.acc-modal-err {
margin: 0 0 10px; padding: 8px 10px; border-radius: 9px;
background: var(--surface); color: #b42318; font-size: 12px; font-weight: 600;
}
.acc-modal-err.hidden { display: none !important; }
.acc-modal-actions {
display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;
}
/* Profile settings */
.pf-page { max-width: 640px; }
.pf-head h1 { margin-bottom: 6px; }
.pf-lead {
margin: 0 0 20px; font-size: 13px; color: var(--muted); line-height: 1.45;
}
.pf-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(16, 24, 40, .04),
0 12px 32px rgba(16, 24, 40, .05);
}
.pf-banner {
display: flex; align-items: center; gap: 14px;
padding: 22px 24px;
background:
radial-gradient(420px 120px at 12% 0%, rgba(47, 107, 255, .16), transparent 70%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border-bottom: 1px solid var(--line);
}
.pf-av {
width: 52px; height: 52px; flex: 0 0 52px; font-size: 15px;
background: linear-gradient(145deg, var(--acc), var(--acc));
color: #fff; border: 0;
box-shadow: 0 6px 16px rgba(47, 107, 255, .28);
}
.pf-banner-txt { min-width: 0; }
.pf-banner-txt b {
display: block; font-size: 17px; font-weight: 750; letter-spacing: -.03em;
font-family: var(--font-display); color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-id-sub {
display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); font-weight: 550;
}
.pf-body { padding: 8px 24px 8px; }
.pf-block {
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.pf-block:last-of-type { border-bottom: 0; }
.pf-h2 {
margin: 0 0 14px;
font-size: 13px; font-weight: 750; letter-spacing: -.01em; color: var(--text);
}
.pf-block-hd {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 6px 16px; margin-bottom: 14px;
}
.pf-block-hd .pf-h2 { margin: 0; }
.pf-block-hd .pf-hint { margin: 0; }
.pf-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 14px;
}
.pf-field {
display: flex; flex-direction: column; gap: 6px; min-width: 0;
font-size: 12px; font-weight: 650; color: var(--muted);
}
.pf-span2 { grid-column: 1 / -1; }
.pf-field > span:first-child { line-height: 1.2; }
.pf-field input,
.pf-pass-wrap input {
height: 42px !important; width: 100% !important;
padding: 0 12px !important;
border: 1px solid var(--line-strong) !important;
border-radius: 11px !important;
background: var(--surface-2) !important;
font: inherit !important; font-size: 13.5px !important; font-weight: 500 !important;
color: var(--text) !important;
box-shadow: none !important;
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.pf-pass-wrap input { padding-right: 42px !important; }
.pf-field input:hover,
.pf-pass-wrap input:hover {
background: var(--surface) !important;
border-color: var(--line-strong) !important;
}
.pf-field input:focus,
.pf-pass-wrap input:focus {
background: var(--surface) !important;
border-color: #9db4ff !important;
box-shadow: 0 0 0 3px rgba(47, 107, 255, .12) !important;
outline: none;
}
.pf-pass-wrap {
position: relative; display: block;
}
button.pf-eye,
.pf-eye {
appearance: none !important;
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 34px !important; height: 34px !important;
margin: 0 !important; padding: 0 !important;
border: 0 !important; border-radius: 8px !important;
background: transparent !important;
color: var(--faint) !important;
cursor: pointer;
box-shadow: none !important;
}
button.pf-eye::before,
.pf-eye::before {
content: "";
display: block; width: 17px; height: 17px; margin: 0 auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
button.pf-eye.on::before,
.pf-eye.on::before {
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 10.6A3 3 0 0012 15a3 3 0 002.4-4.4M6.1 6.1C3.9 7.6 2.4 10 2 12c0 0 3.5 7 10 7a11 11 0 005.4-1.4M14.1 9.1A3 3 0 0115 12'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 10.6A3 3 0 0012 15a3 3 0 002.4-4.4M6.1 6.1C3.9 7.6 2.4 10 2 12c0 0 3.5 7 10 7a11 11 0 005.4-1.4M14.1 9.1A3 3 0 0115 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
button.pf-eye:hover,
.pf-eye:hover { color: var(--acc) !important; background: var(--acc-soft) !important; filter: none; }
.pf-hint {
margin: 0; font-size: 12px; color: var(--faint); line-height: 1.4; font-weight: 500;
}
.pf-err {
margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px;
background: var(--surface); color: #b42318; font-size: 12px; font-weight: 600;
}
.pf-err.hidden { display: none !important; }
.pf-actions {
display: flex; justify-content: flex-end; gap: 10px;
padding: 16px 24px;
background: var(--surface-2);
border-top: 1px solid var(--line);
}
button.pf-cancel,
.pf-cancel {
min-width: 112px !important;
height: 40px !important;
border-radius: 11px !important;
}
button.pf-save,
.pf-save {
min-width: 128px !important;
height: 40px !important;
border-radius: 11px !important;
background: var(--acc) !important;
border: 1px solid transparent !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(47, 107, 255, .25) !important;
}
button.pf-save:hover,
.pf-save:hover {
background: var(--acc-hover) !important;
filter: none;
}
@media (max-width: 640px) {
.pf-grid { grid-template-columns: 1fr; }
.pf-span2 { grid-column: auto; }
.pf-banner, .pf-body, .pf-actions { padding-left: 16px; padding-right: 16px; }
.pf-block-hd { flex-direction: column; align-items: flex-start; }
}
.page { padding: 20px 22px 120px; max-width: 1180px; margin: 0 auto; }
body.view-edit.on-preview .page { padding-bottom: 160px; }
.crumb {
color: var(--faint); font-size: 11px; margin-bottom: 6px;
font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
h1 {
font-family: var(--font-display);
font-size: 26px; font-weight: 700; margin: 0 0 16px; letter-spacing: -.04em;
}
#view-edit h1 { margin-bottom: 12px; }
.card {
background: var(--card);
border-radius: 16px;
box-shadow: var(--shadow);
border: 1px solid var(--line);
padding: 16px 18px;
margin-bottom: 16px;
}
.grow { flex: 1; }
button, .btn {
height: 34px; padding: 0 14px; border: 0; border-radius: 10px;
background: var(--acc); color: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease, transform .12s ease;
}
/* Soft hover for solid primary buttons — do NOT repaint background globally
(that was forcing blue fills onto tabs/chips/ghosts and looked broken). */
button:hover, .btn:hover {
filter: brightness(1.05);
}
button:active, .btn:active { filter: brightness(.97); }
button.ghost, .btn.ghost {
background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); font-weight: 550;
filter: none;
}
button.ghost:hover, .btn.ghost:hover {
color: var(--acc); border-color: #b9c9ff; background: var(--acc-soft);
filter: none;
}
button.ghost:active, .btn.ghost:active { filter: none; background: var(--surface); }
button.link {
background: transparent; color: var(--acc); height: auto; padding: 0;
filter: none;
}
button.link:hover { background: transparent; color: var(--acc-hover); filter: none; }
button:disabled, button:disabled:hover {
opacity: .4; cursor: default; filter: none;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
code { background: var(--surface); padding: 3px 7px; border-radius: 7px; font-size: 12px; font-weight: 650; color: var(--text); }
.pill {
display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
font-size: 12px; font-weight: 650; background: var(--ok-bg); color: var(--ok);
}
.pill.off { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.soft { background: var(--surface); color: var(--muted); }
.pill.arch { background: var(--surface); color: var(--muted); }
.actions { display: flex; gap: 4px; justify-content: flex-end; }
.field { min-width: 0; margin: 0 0 12px; }
.field > label, label {
display: block; font-size: 12px; font-weight: 600; color: var(--muted);
margin: 0 0 6px;
}
.field-split {
display: flex; align-items: stretch; gap: 8px; min-width: 0;
}
.field-split > select { flex: 1; min-width: 0; }
.field-split .preland-create-btn {
flex: 0 0 auto;
height: 40px;
padding: 0 12px;
white-space: nowrap;
font-size: 12px;
font-weight: 650;
border-radius: 10px;
align-self: stretch;
}
@media (max-width: 720px) {
.field-split { flex-direction: column; }
.field-split .preland-create-btn { width: 100%; }
}
/* ── Funnel (main edit) ── */
.sec-funnel .funnel-flow {
display: grid;
grid-template-columns: minmax(0, 1.15fr) auto minmax(0, .9fr);
gap: 0 14px;
align-items: stretch;
}
.funnel-step {
min-width: 0;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.funnel-step-hd {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 12px;
}
.funnel-step-n {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 8px;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 750;
color: var(--acc);
background: var(--acc-soft);
letter-spacing: -.02em;
}
.funnel-step-hd > div {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.funnel-step-hd b {
font-size: 13px;
font-weight: 700;
letter-spacing: -.015em;
color: var(--text);
line-height: 1.2;
}
.funnel-step-hd span {
font-size: 12px;
font-weight: 450;
color: var(--faint);
line-height: 1.35;
}
.funnel-create {
flex: 0 0 auto;
align-self: center;
height: 30px;
padding: 0 10px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--acc);
font-size: 12px;
font-weight: 650;
text-decoration: none;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.funnel-create:hover {
background: var(--acc-soft);
border-color: #b8ccf5;
color: var(--acc);
}
.funnel-step-body {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 10px 12px;
}
.funnel-step-body-1 { grid-template-columns: 1fr; }
.funnel-step .field { margin: 0; }
.funnel-step > .hint { margin: 10px 0 0; }
.funnel-step #whiteUrlField { margin-top: 10px; }
.funnel-join {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 28px;
padding: 8px 0;
color: var(--faint);
}
.funnel-join-line {
width: 1px;
flex: 1 1 auto;
min-height: 18px;
background: linear-gradient(180deg, transparent, var(--surface-2) 20%, var(--surface-2) 80%, transparent);
}
.funnel-join-lab {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 10px;
font-weight: 650;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--faint);
line-height: 1;
}
@media (max-width: 980px) {
.sec-funnel .funnel-flow {
grid-template-columns: 1fr;
gap: 10px;
}
.funnel-join {
flex-direction: row;
min-height: 0;
padding: 0 4px;
}
.funnel-join-line {
width: auto;
height: 1px;
flex: 1 1 auto;
min-height: 0;
background: linear-gradient(90deg, transparent, var(--surface-2) 20%, var(--surface-2) 80%, transparent);
}
.funnel-join-lab {
writing-mode: horizontal-tb;
transform: none;
letter-spacing: .03em;
}
.funnel-step-body { grid-template-columns: 1fr; }
}
/* Never stretch checkboxes/radios/dates-in-toolbars — they must not inherit text-field sizing */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="date"]),
select, textarea {
width: 100%; height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong);
border-radius: 10px; font: inherit; background: var(--surface); color: var(--text);
}
input[type="date"] {
width: auto; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong);
border-radius: 10px; font: inherit; background: var(--surface); color: var(--text);
}
select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
select[multiple] {
appearance: auto;
background-image: none;
height: auto;
min-height: 132px;
padding: 6px;
cursor: default;
}
textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus {
outline: none; border-color: #8eafff; box-shadow: 0 0 0 3px rgba(47,107,255,.16);
}
/* —— Shared icon-search shell (beats global input chrome) —— */
.ui-search,
.mail-search,
.mail-pwa-search,
.nk-search,
.nk-pick-search,
.mpick-search {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
height: 40px;
padding: 0 6px;
border-radius: 12px;
border: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
color: var(--faint);
box-shadow:
0 1px 2px rgba(16, 24, 40, .04),
inset 0 1px 0 rgba(255, 255, 255, .9);
box-sizing: border-box;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
cursor: text;
}
.field > .ui-search { max-width: none; }
.ui-search-block { margin-bottom: 10px; }
.ui-search .ui-search-ico,
.mail-search .mail-search-ico,
.mail-pwa-search .mail-search-ico,
.nk-search .mail-search-ico,
.nk-pick-search .mail-search-ico,
.mpick-search .mail-search-ico,
.ui-search > svg,
.mail-pwa-search > svg,
.nk-pick-search > svg,
.mpick-search > svg {
flex: 0 0 auto;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--surface);
color: var(--muted);
box-sizing: border-box;
transition: background .18s ease, color .18s ease;
}
.ui-search .ui-search-ico svg,
.mail-search .mail-search-ico svg,
.mail-pwa-search .mail-search-ico svg,
.nk-search .mail-search-ico svg,
.nk-pick-search .mail-search-ico svg { display: block; }
.ui-search > svg,
.mail-pwa-search > svg,
.nk-pick-search > svg { padding: 7px; }
.nk-search .nk-search-ico { display: none; } /* legacy absolute icon */
.ui-search:hover,
.mail-search:hover,
.mail-pwa-search:hover,
.nk-search:hover,
.nk-pick-search:hover,
.mpick-search:hover {
border-color: var(--line-strong);
color: var(--muted);
}
.ui-search:hover .ui-search-ico,
.mail-search:hover .mail-search-ico,
.mail-pwa-search:hover .mail-search-ico,
.nk-search:hover .mail-search-ico,
.nk-pick-search:hover .mail-search-ico,
.mpick-search:hover .mail-search-ico,
.ui-search:hover > svg,
.mail-pwa-search:hover > svg,
.nk-pick-search:hover > svg,
.mpick-search:hover > svg {
background: var(--surface);
color: var(--acc);
}
.ui-search:focus-within,
.mail-search:focus-within,
.mail-pwa-search:focus-within,
.nk-search:focus-within,
.nk-pick-search:focus-within,
.mpick-search:focus-within {
border-color: #9db6ff;
background: var(--surface);
color: var(--acc);
box-shadow:
0 0 0 3px rgba(47, 107, 255, .12),
0 4px 14px rgba(47, 107, 255, .08);
}
.ui-search:focus-within .ui-search-ico,
.mail-search:focus-within .mail-search-ico,
.mail-pwa-search:focus-within .mail-search-ico,
.nk-search:focus-within .mail-search-ico,
.nk-pick-search:focus-within .mail-search-ico,
.mpick-search:focus-within .mail-search-ico,
.ui-search:focus-within > svg,
.mail-pwa-search:focus-within > svg,
.nk-pick-search:focus-within > svg,
.mpick-search:focus-within > svg {
background: var(--acc-soft);
color: var(--acc);
}
.ui-search input,
.mail-search input,
.mail-pwa-search input,
.nk-search input,
.nk-pick-search input,
.mpick-search input,
.nk-pick-search input.nk-pick-q,
input.nk-pick-q {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 10px 0 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font: inherit !important;
font-size: 13.5px !important;
font-weight: 500 !important;
letter-spacing: -.01em;
color: var(--text) !important;
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.ui-search input::placeholder,
.mail-search input::placeholder,
.mail-pwa-search input::placeholder,
.nk-search input::placeholder,
.nk-pick-search input::placeholder,
.mpick-search input::placeholder,
input.nk-pick-q::placeholder {
color: var(--faint) !important;
font-weight: 450;
}
.ui-search input[type="search"]::-webkit-search-decoration,
.ui-search input[type="search"]::-webkit-search-cancel-button,
.mail-search input[type="search"]::-webkit-search-decoration,
.mail-search input[type="search"]::-webkit-search-cancel-button,
.mail-pwa-search input[type="search"]::-webkit-search-decoration,
.mail-pwa-search input[type="search"]::-webkit-search-cancel-button,
.nk-search input[type="search"]::-webkit-search-decoration,
.nk-search input[type="search"]::-webkit-search-cancel-button,
.nk-pick-search input[type="search"]::-webkit-search-decoration,
.nk-pick-search input[type="search"]::-webkit-search-cancel-button,
.mpick-search input[type="search"]::-webkit-search-decoration,
.mpick-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.row-host { grid-template-columns: 1fr 1fr; }
.row > .field, .row3 > .field { margin-bottom: 0; }
.tabs {
display: flex; gap: 1px; margin: 0 -18px 18px; padding: 0 10px 0;
overflow: auto; border-bottom: 1px solid var(--line);
}
.tab {
background: transparent; color: var(--muted); height: 42px; border-radius: 8px 8px 0 0;
padding: 0 14px; font-weight: 550; box-shadow: none; border-bottom: 2px solid transparent;
}
.tab:hover { background: transparent; color: var(--acc); }
.tab.on { color: var(--acc); border-bottom-color: var(--acc); font-weight: 650; }
/* Edit: left section nav */
body.view-edit .page {
max-width: 1480px;
margin-left: 0;
margin-right: auto;
padding-bottom: 140px;
}
body.view-edit .form-foot-inner {
max-width: 1480px;
margin-left: 0;
margin-right: auto;
}
.edit-card { padding: 0; }
.edit-shell {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
align-items: stretch;
min-height: max(480px, calc(100vh - 64px - 120px));
/* Full-height gray rail; menu itself stays sticky at the top */
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 48%, var(--surface) 100%)
left top / 240px 100% no-repeat,
var(--surface);
border-radius: 16px;
}
.edit-nav {
position: sticky;
top: 56px;
align-self: start;
z-index: 1;
max-height: calc(100vh - 56px - 64px);
overflow: auto;
padding: 16px 12px 20px;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 48%, var(--surface) 100%);
border-right: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
border-radius: 16px 0 0 0;
scrollbar-width: thin;
/* Keep sticky nav off the compositor thrash path while the form scrolls */
contain: layout paint style;
}
.edit-nav-group {
margin: 0 0 10px;
padding: 8px 6px 6px;
border-radius: 14px;
background: rgba(255, 255, 255, .55);
border: 1px solid rgba(255, 255, 255, .7);
box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
.edit-nav-group:last-child { margin-bottom: 0; }
.edit-nav-label {
display: flex;
align-items: center;
gap: 7px;
padding: 2px 8px 8px;
font-size: 10px; font-weight: 750; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
}
.edit-nav-label::before {
content: "";
width: 5px; height: 5px; border-radius: 99px; flex: none;
background: color-mix(in srgb, var(--acc) 55%, var(--surface-2));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 10%, transparent);
}
.edit-nav-item.tab {
width: 100%;
height: auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 11px;
padding: 8px 10px;
margin: 0 0 3px;
border: 0;
border-radius: 12px;
border-bottom: 0;
background: transparent;
color: var(--muted);
text-align: left;
font-weight: 550;
box-shadow: none;
position: relative;
cursor: pointer;
transition:
background .16s ease,
color .16s ease,
box-shadow .16s ease,
transform .16s ease;
}
.edit-nav-item.tab:last-child { margin-bottom: 0; }
.edit-nav-item.tab:hover {
background: rgba(255, 255, 255, .92);
color: var(--text);
box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.edit-nav-item.tab:hover .edit-nav-ico {
background: var(--surface);
color: var(--text);
border-color: color-mix(in srgb, var(--line-strong) 70%, transparent);
}
.edit-nav-item.tab:active { transform: scale(.985); }
.edit-nav-item.tab.on {
background: linear-gradient(135deg, var(--surface) 0%, var(--surface) 100%);
color: var(--text);
border-bottom-color: transparent;
box-shadow:
0 1px 2px rgba(16, 24, 40, .04),
0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .9);
font-weight: 550;
}
.edit-nav-item.tab.on .edit-nav-ico {
background: linear-gradient(160deg, var(--surface) 0%, var(--surface) 100%);
color: var(--acc);
border-color: color-mix(in srgb, var(--acc) 22%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.edit-nav-item.tab.on .edit-nav-txt b { color: var(--acc); }
.edit-nav-item.tab.on .edit-nav-txt span { color: color-mix(in srgb, var(--acc) 42%, var(--faint)); }
.edit-nav-ico {
width: 34px; height: 34px; border-radius: 10px; flex: none;
display: grid; place-items: center;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
color: var(--muted);
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.edit-nav-ico svg { width: 16px; height: 16px; display: block; }
.edit-nav-txt {
min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 0;
}
.edit-nav-txt b {
font-size: 13px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
color: inherit;
}
.edit-nav-txt span {
font-size: 11px; font-weight: 500; color: var(--faint); line-height: 1.3;
letter-spacing: -.005em;
}
.edit-body {
min-width: 0;
padding: 18px 22px 28px;
}
body.on-preview .edit-body { padding-bottom: 36px; }
.pane { display: none !important; }
.pane.on { display: block !important; }
#pane-main.pane.on {
display: flex !important; flex-direction: column; gap: 0;
}
#pane-main .sec {
margin: 0; padding: 14px 0;
border: 0; border-bottom: 1px solid var(--line);
}
#pane-main .sec:first-child { padding-top: 4px; }
#pane-main .sec.last, #pane-main .sec:last-child {
border-bottom: 0; padding-bottom: 4px;
}
#pane-main .sec-h { margin: 0 0 10px; }
#pane-main .sec-h h3 { margin: 0; font-size: 14px; }
#pane-main .sec-h p { margin: 3px 0 0; }
#pane-main .field { margin: 0; }
#pane-main .row, #pane-main .row3 { margin: 0 0 12px; }
#pane-main .row:last-child, #pane-main .row3:last-child { margin-bottom: 0; }
#pane-main .hint { margin: 8px 0 0; }
#pane-main .field .hint { margin: 4px 0 0; }
.hint { color: var(--faint); font-size: 12px; line-height: 1.45; margin: 6px 0 0; font-weight: 450; }
.hidden { display: none !important; }
.sec { margin: 0 0 22px; padding: 0 0 4px; }
.sec + .sec { border-top: 1px solid var(--line); padding-top: 18px; }
#pane-main .sec + .sec { padding-top: 14px; margin-top: 0; border-top: 0; }
.sec-h { margin: 0 0 14px; }
.sec-h h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.sec-h p { margin: 0; color: var(--faint); font-size: 12px; font-weight: 450; line-height: 1.45; }
.sec .field { margin-bottom: 12px; }
.sec .row, .sec .row3 { margin-bottom: 12px; }
.sec .row > .field, .sec .row3 > .field { margin-bottom: 0; }
.count { float: right; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-only {
position: absolute !important; width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.desc-lang-card {
margin: 0 0 16px;
padding: 16px;
border-radius: 18px;
border: 1px solid var(--line);
background:
radial-gradient(90% 140% at 0% 0%, rgba(47,107,255,.07), transparent 55%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.desc-panel-hd {
margin: 0 0 12px;
}
.desc-panel-hd h3 {
margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -.02em; color: var(--text);
}
.desc-panel-hd p {
margin: 4px 0 0; font-size: 13px; color: var(--faint); line-height: 1.4;
}
.rev-panel-hd {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
gap: 12px 20px;
}
.rev-panel-hd > div:first-child { min-width: 0; flex: 1 1 220px; }
.desc-lang-bar {
margin: 0;
padding: 10px 12px;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--line);
}
.desc-lang-note {
margin: 8px 2px 12px;
font-size: 11.5px; color: var(--faint); line-height: 1.35;
}
.desc-lang-card #descTransBar,
.desc-lang-card #revTransBar {
margin: 0;
}
.desc-lang-card .mail-lang-chip {
min-height: 34px;
padding: 6px 12px;
font-size: 12.5px;
}
.desc-lang-card .mail-lang-add {
height: 34px;
padding: 0 14px;
}
/* Never show the sync-only default_lang control (or a leftover csel wrap). */
#default_lang,
.csel:has(#default_lang) {
display: none !important;
}
.langrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 16px; }
.langpill {
display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px 4px 8px;
border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text);
}
.langpill b {
font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
background: var(--surface); color: var(--muted); border-radius: 6px; padding: 2px 6px;
}
.langpill.on { border-color: #b9c9ff; background: var(--acc-soft); color: var(--acc); }
.langpill.on b { background: var(--surface); color: var(--acc); }
.langpill em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--acc); }
.langpill .aslink { height: auto; padding: 0; background: none; color: var(--faint); font-size: 11px; font-weight: 600; border: 0; }
.langpill .aslink:hover { color: var(--acc); background: none; }
.langpill .x { width: 20px; height: 20px; padding: 0; border-radius: 999px; background: transparent; color: var(--faint); border: 0; }
.langpill .x:hover { color: #d92d20; background: var(--surface); }
.addlang { display: flex; gap: 6px; width: 240px; }
.addlang select { height: 34px; }
.addlang button { height: 34px; padding: 0 12px; white-space: nowrap; }
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 2px; }
.toggles .swrow { margin: 0; }
.swrow .sub { display: block; font-size: 11px; font-weight: 450; color: var(--faint); }
.chip {
display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface);
cursor: pointer; font-size: 13px; font-weight: 550; color: var(--text);
}
.chip.on { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.chip button { border: 0; background: transparent; cursor: pointer; color: var(--faint); padding: 0; height: auto; width: auto; box-shadow: none; }
.chip.addchip { width: 32px; padding: 0; justify-content: center; font-size: 16px; font-weight: 500; color: var(--muted); }
.modal {
position: fixed; inset: 0; z-index: 240;
background: rgba(16, 24, 40, .45);
display: grid; place-items: center;
padding: 16px;
}
.modal.hidden { display: none !important; }
.modal-card {
width: min(440px, 100%);
background: var(--surface);
border-radius: 16px;
padding: 20px 20px 16px;
box-shadow: 0 16px 48px rgba(16, 24, 40, .18);
border: 1px solid var(--line);
}
.modal-card header {
display: flex; align-items: center; justify-content: space-between;
margin: 0 0 16px;
}
.modal-card h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.modal-card .ico { width: 32px; height: 32px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.crop-modal {
background: rgba(12, 16, 28, .55);
backdrop-filter: blur(6px);
padding: 12px;
}
.crop-card {
width: min(920px, 100%);
padding: 0;
overflow: hidden;
border-radius: 18px;
box-shadow: 0 24px 64px rgba(12, 16, 28, .28);
}
.crop-hd {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin: 0; padding: 16px 18px 12px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.crop-hd-text { min-width: 0; }
.crop-hd h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.025em; }
.crop-spec { margin: 3px 0 0; font-size: 12px; color: var(--muted); font-weight: 550; }
.crop-hd-meta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.crop-chip {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 10px; border-radius: 999px;
background: var(--surface); color: var(--muted);
font-size: 11px; font-weight: 600; white-space: nowrap;
}
.crop-chip b { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.crop-chip.out { background: var(--acc-soft); color: var(--acc); }
.crop-chip.out b { color: var(--acc); }
.crop-presets {
display: flex; gap: 8px; flex-wrap: wrap;
margin: 0; padding: 10px 18px 0;
}
.crop-presets.hidden { display: none; }
.crop-presets .ghost { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; }
.crop-presets .ghost.on { background: var(--acc-soft); color: var(--acc); border-color: transparent; }
.crop-stage {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
margin: 12px 14px 0;
padding: 18px 16px 12px;
min-height: 260px;
border-radius: 16px;
background:
radial-gradient(120% 80% at 50% 40%, var(--surface-2) 0%, var(--surface-2) 70%, var(--surface-2) 100%);
border: 1px solid var(--line-strong);
overflow: hidden;
}
.crop-frame {
position: relative;
display: inline-block;
max-width: 100%;
border-radius: 10px;
box-shadow:
0 0 0 1px rgba(255,255,255,.14),
0 0 0 8px rgba(255,255,255,.04),
0 16px 40px rgba(0,0,0,.45);
}
.crop-frame::before,
.crop-frame::after {
content: ""; position: absolute; z-index: 2; pointer-events: none;
width: 18px; height: 18px; border: 2px solid var(--line);
}
.crop-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.crop-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.crop-frame-badge {
position: absolute; top: 8px; left: 8px; z-index: 3;
height: 22px; padding: 0 8px; border-radius: 6px;
background: rgba(12,16,28,.72); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: .02em;
display: inline-flex; align-items: center;
backdrop-filter: blur(6px); pointer-events: none;
}
.crop-stage-hint {
margin: 0; color: rgba(255,255,255,.45);
font-size: 11px; font-weight: 550; letter-spacing: -.01em;
text-align: center;
}
#cropCanvas {
display: block;
max-width: 100%;
border-radius: 10px;
cursor: grab;
background: var(--surface-2);
touch-action: none;
}
#cropCanvas:active { cursor: grabbing; }
.crop-tools {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin: 0; padding: 14px 18px 4px;
}
.crop-zoom-bar {
display: flex; align-items: center; gap: 8px;
flex: 1 1 280px; min-width: 0;
}
.crop-icon-btn {
width: 34px; height: 34px; padding: 0; border-radius: 10px;
font-size: 18px; font-weight: 600; line-height: 1; flex: 0 0 34px;
}
.crop-zoom {
display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
margin: 0; font-size: 12px; font-weight: 650; color: var(--muted);
}
.crop-zoom input[type=range] {
flex: 1; min-width: 0; height: 4px; padding: 0; border: 0;
border-radius: 999px; background: var(--surface); accent-color: var(--acc);
cursor: pointer;
}
.crop-zoom-pct {
flex: 0 0 44px; text-align: right;
font-size: 12px; font-weight: 750; color: var(--text);
font-variant-numeric: tabular-nums;
}
.crop-tool-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.crop-tool-btns .ghost { height: 34px; padding: 0 12px; border-radius: 10px; }
.crop-actions {
margin: 0; padding: 12px 18px 16px;
border-top: 1px solid var(--line);
background: var(--surface-2);
}
.crop-actions #cropApply { min-width: 120px; height: 36px; border-radius: 10px; }
.hint.err { color: #d92d20; min-height: 16px; }
#addLangSel { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.lang-multi-bar {
display: flex; align-items: center; gap: 8px;
margin: 0 0 8px;
}
.lang-multi-bar .ghost.mini {
height: 28px; padding: 0 10px; border-radius: 8px;
font-size: 12px; font-weight: 600;
}
.lang-multi-count {
margin-left: auto;
font-size: 12px; color: var(--muted); font-weight: 550;
}
.lang-multi {
max-height: 240px; overflow: auto;
border: 1px solid var(--line-strong); border-radius: 12px;
background: var(--surface); padding: 6px;
display: flex; flex-direction: column; gap: 2px;
direction: ltr;
unicode-bidi: isolate;
}
label.lang-multi-item,
.lang-multi-item {
appearance: none; -webkit-appearance: none;
display: flex; align-items: center; gap: 10px;
width: 100%; margin: 0; padding: 8px 10px; border-radius: 8px;
border: 0; background: transparent; text-align: left;
cursor: pointer; user-select: none; font: inherit; color: inherit;
box-shadow: none;
direction: ltr;
unicode-bidi: isolate;
box-sizing: border-box;
}
.lang-multi-item:hover { background: var(--surface); }
.lang-multi-item.is-on,
.lang-multi-item:has(input:checked) { background: var(--acc-soft); }
.lang-multi-item input {
width: 16px; height: 16px; margin: 0; flex: none;
accent-color: var(--acc);
}
.lang-multi-text {
display: flex; align-items: baseline; gap: 8px; min-width: 0;
flex: 1 1 auto;
font-size: 13px; font-weight: 550; color: var(--text);
text-align: left;
unicode-bidi: isolate;
}
.lang-multi-text b {
flex: none; min-width: 28px;
font-size: 11px; font-weight: 750; color: var(--muted);
letter-spacing: .02em;
direction: ltr; unicode-bidi: isolate;
}
.lang-multi-item.is-on .lang-multi-text b { color: var(--acc); }
.lang-multi-empty {
margin: 0; padding: 18px 12px; text-align: center;
font-size: 13px; color: var(--muted);
}
#langModal {
position: fixed !important;
inset: 0 !important;
z-index: 260 !important;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(16, 24, 40, .45);
box-sizing: border-box;
}
#langModal:not(.hidden) {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#langModal .modal-card,
#langModal .lang-modal-card {
max-width: 460px;
width: min(460px, calc(100vw - 32px));
margin: 0 auto;
max-height: min(88vh, 720px);
overflow: auto;
}
#langModal .lang-multi-search { margin-bottom: 8px; }
#langModal .lang-multi { max-height: min(320px, 46vh); }
.pcheck {
display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; cursor: pointer;
font-size: 13px; font-weight: 600; color: var(--text);
}
.pcheck input { position: absolute; opacity: 0; width: 0; pointer-events: none; }
.pcheck .box {
width: 18px; height: 18px; border: 2px solid var(--line-strong); border-radius: 5px;
display: grid; place-items: center; background: var(--surface); flex: 0 0 18px;
}
.pcheck input:checked + .box { background: var(--acc); border-color: var(--acc); }
.pcheck input:checked + .box::after {
content: ""; width: 4px; height: 8px; border: solid var(--line); border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
.media-grid { display: grid; grid-template-columns: 112px 200px 1fr; gap: 12px; align-items: stretch; }
.drop {
position: relative; min-height: 112px; border: 1px dashed var(--line-strong);
border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 6px; color: var(--faint);
font-size: 12px; font-weight: 600; text-align: center; overflow: hidden; padding: 10px;
}
.drop:hover { border-color: #b9c9ff; background: var(--acc-soft); color: var(--acc); }
.drop input {
position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 3;
width: 100% !important; height: 100% !important; min-height: 0 !important;
padding: 0 !important; border: 0 !important; border-radius: 14px;
font-size: 0; background: transparent;
}
.drop img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 1; pointer-events: none;
}
.drop .plus {
width: 28px; height: 28px; border-radius: 8px; background: var(--acc-soft); color: var(--acc);
display: grid; place-items: center; font-size: 18px; line-height: 1; pointer-events: none;
}
.drop-cap { font-size: 12px; font-weight: 650; pointer-events: none; }
.drop-icon { width: 112px; height: 112px; min-height: 112px; }
.drop-poster { min-height: 112px; }
.drop .media-x {
display: none; position: absolute; top: 6px; right: 6px; z-index: 5;
width: 22px; height: 22px; border: 0; border-radius: 999px;
background: rgba(17,24,39,.72); color: #fff; font-size: 16px; line-height: 1;
cursor: pointer; align-items: center; justify-content: center; padding: 0;
}
.drop:has(img:not(.hidden)) .media-x { display: grid; }
.shot-chip { position: relative; display: inline-flex; }
.shot-chip .media-x { display: grid; position: absolute; top: 4px; right: 4px; z-index: 5;
width: 20px; height: 20px; border: 0; border-radius: 999px;
background: rgba(17,24,39,.72); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}
.shots-col { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; min-height: 112px; }
.drop-add { width: 88px; min-height: 112px; flex: 0 0 88px; }
.shotprev { display: flex; gap: 8px; flex-wrap: wrap; }
.shotprev img { width: 64px; height: 112px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.revrow { display: grid; grid-template-columns: 1fr 80px 2fr 32px; gap: 8px; margin-bottom: 8px; align-items: start; }
/* —— Comments tab (Описание-style) —— */
body.on-rev .page { max-width: 1420px; }
body.on-rev .form-foot-inner { max-width: 1420px; }
.rev-summary {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px;
justify-content: flex-end; flex: 1; min-width: 220px;
}
.rev-summary-score { margin: 0; min-width: 160px; }
.rev-summary-score label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650; color: var(--muted); }
.rev-rating-row { display: flex; gap: 6px; align-items: center; }
.rev-rating-row input {
width: 72px; height: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rev-rating-row .ghost { height: 34px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.rev-summary-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-bottom: 4px; }
.rev-count-pill {
font-size: 12px; font-weight: 700; color: var(--acc);
background: var(--acc-soft); border-radius: 999px; padding: 4px 10px;
}
.rev-stars-read {
color: #f59e0b; letter-spacing: 1px; font-size: 14px; line-height: 1;
}
#pane-rev .rev-sec { scroll-margin-top: 108px; }
#pane-rev .rev-sec {
margin: 0 0 16px; padding: 16px 16px 14px;
border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2);
}
#pane-rev .rev-sec.last { margin-bottom: 4px; }
.rev-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.rev-card {
display: grid; grid-template-columns: 44px 1fr auto; gap: 10px 12px;
padding: 14px 14px 12px; background: var(--surface);
border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 1px 2px rgba(16,24,40,.03);
transition: border-color .15s ease, box-shadow .15s ease;
}
.rev-card:focus-within {
border-color: #b9c9ff; box-shadow: 0 0 0 3px var(--acc-soft);
}
.rev-card-av-wrap {
position: relative;
width: 44px; grid-row: 1 / span 2; align-self: start;
}
.rev-card-av {
width: 44px; height: 44px; border-radius: 999px; flex: none;
display: grid; place-items: center; position: relative; overflow: hidden;
background: linear-gradient(145deg, var(--surface), var(--surface));
color: var(--acc); font-weight: 800; font-size: 15px; letter-spacing: -.02em;
border: 0; padding: 0; cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06);
transition: box-shadow .15s ease, transform .12s ease;
}
.rev-card-av:hover { transform: scale(1.04); box-shadow: 0 0 0 3px var(--acc-soft); }
.rev-card-av-letter { grid-area: 1 / 1; line-height: 1; }
.rev-card-av-img {
grid-area: 1 / 1; width: 100%; height: 100%;
object-fit: cover; border-radius: 999px; display: block;
}
.rev-card-av-img.hidden, .rev-av-clear.hidden { display: none !important; }
.rev-card.has-avatar .rev-card-av-letter { display: none; }
.rev-card-av-hint {
position: absolute; inset: 0; display: grid; place-items: center;
background: rgba(16, 24, 40, .45); color: #fff; font-size: 18px; font-weight: 700;
opacity: 0; transition: opacity .15s ease; border-radius: 999px;
}
.rev-card-av:hover .rev-card-av-hint { opacity: 1; }
.rev-av-clear {
position: absolute; top: -6px; right: -6px; z-index: 2;
width: 20px; height: 20px; padding: 0; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface); color: var(--muted);
font-size: 12px; line-height: 1; cursor: pointer;
display: grid; place-items: center;
box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.rev-av-clear:hover { color: #d92d20; background: var(--surface); }
.rev-card-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; grid-column: 2; }
.rev-card-top {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.rev-author-row {
display: flex; flex: 1; min-width: 160px; align-items: center; gap: 6px;
}
.rev-author-row .field { margin: 0; flex: 1; min-width: 100px; }
.rev-card-top input[type="text"], .rev-card-top input:not([type]) {
height: 34px; font-weight: 650;
}
.rev-gender {
display: inline-flex; gap: 2px; padding: 2px;
border-radius: 10px; background: var(--surface-2); flex: none;
}
.rev-gender .rev-g {
width: 28px; height: 28px; border: 0; border-radius: 8px;
background: transparent; color: var(--muted); cursor: pointer;
font-size: 12px; font-weight: 750; line-height: 1; padding: 0;
}
.rev-gender .rev-g.on {
background: var(--surface); color: var(--acc);
box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16,24,40,.04);
}
.rev-gender .rev-g:hover { color: var(--acc); }
.rev-name-roll {
width: 28px; height: 28px; padding: 0; flex: none;
display: grid; place-items: center;
font-size: 14px; color: var(--muted);
}
.rev-name-roll:hover { color: var(--acc); background: var(--acc-soft); }
.rev-stars {
display: inline-flex; gap: 2px; align-items: center;
padding: 2px; border-radius: 10px; background: var(--surface-2);
}
.rev-stars button {
width: 28px; height: 28px; border: 0; border-radius: 8px;
background: transparent; color: #d0d5dd; cursor: pointer;
font-size: 16px; line-height: 1; padding: 0;
transition: color .12s ease, transform .12s ease;
}
.rev-stars button.on { color: #f59e0b; }
.rev-stars button:hover { color: #fbbf24; transform: scale(1.08); }
.rev-card textarea {
min-height: 72px; resize: vertical; line-height: 1.45;
font-weight: 450;
}
.rev-card-tools {
display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
grid-column: 3; grid-row: 1 / span 2;
}
.rev-card-tools .ghost {
width: 32px; height: 32px; padding: 0;
display: grid; place-items: center; font-size: 16px; color: var(--faint);
}
.rev-card-tools .ghost:hover { color: #d92d20; background: var(--surface); }
.rev-card-tools .rev-move { color: var(--muted); font-size: 12px; }
.rev-card-tools .rev-move:hover { color: var(--acc); background: var(--acc-soft); }
.rev-card-trans {
align-self: flex-start; height: 28px; padding: 0 8px;
font-size: 11px; font-weight: 650; color: var(--acc);
}
.rev-card-main .rev-text-row {
display: flex; gap: 8px; align-items: flex-start;
}
.rev-card-main .rev-text-row textarea { flex: 1; min-width: 0; }
.rev-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
margin: 0 0 4px;
}
.rev-add {
height: 36px; padding: 0 14px; font-weight: 650;
border-style: dashed; border-color: var(--line-strong);
background: var(--surface); color: var(--acc);
}
.rev-add:hover { background: var(--acc-soft); border-color: transparent; }
.rev-gen-wrap {
display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-left: auto;
}
.rev-gen-lab { margin: 0; font-size: 12px; font-weight: 650; color: var(--muted); }
.rev-gen-wrap select {
height: 36px; min-width: 64px; margin: 0;
}
.rev-gen {
height: 36px; padding: 0 14px; font-weight: 650;
background: var(--acc-soft); color: var(--acc); border-color: transparent;
}
.rev-gen:hover { background: var(--acc); color: #fff; }
.rev-gen:disabled { opacity: .65; cursor: wait; }
.rev-tips {
margin: 0; padding-left: 18px; color: var(--muted);
font-size: 13px; line-height: 1.55; font-weight: 450;
}
.rev-tips li + li { margin-top: 6px; }
.rev-empty {
padding: 28px 16px; text-align: center; color: var(--faint);
border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--surface);
font-weight: 550;
}
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.login-card {
width: 380px; background: var(--surface); padding: 36px 32px; border-radius: 20px;
box-shadow: var(--shadow); border: 1px solid var(--line);
}
.login-card h1 { margin: 0 0 4px; text-align: center; }
.sub { color: var(--muted); margin: 0 0 20px; font-size: 13px; }
.login-card button { width: 100%; height: 42px; margin-top: 16px; }
.logo {
width: 36px; height: 36px; border-radius: 10px; background: var(--acc-soft); color: var(--acc);
display: grid; place-items: center; font-weight: 800;
}
.filters { display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; }
.filters label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 550; white-space: nowrap; }
.filters input { width: 168px; height: 36px; padding: 0 12px; }
/* —— List: modern console layout —— */
body.view-list .page {
max-width: 1480px;
padding: 18px 22px 18px;
height: calc(100vh - 64px);
display: flex; flex-direction: column; min-height: 0;
}
body.view-list #view-list {
flex: 1; min-height: 0;
display: flex; flex-direction: column; gap: 14px;
}
.list-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 14px 20px; flex-wrap: wrap; flex: none;
}
.list-title .crumb { margin-bottom: 6px; }
.list-title-row {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.list-title h1 {
margin: 0;
font-family: var(--font-display);
font-size: 28px; font-weight: 700; letter-spacing: -.045em; line-height: 1.05;
}
button.list-create,
.list-create {
appearance: none; border: 0;
height: 36px; min-height: 36px; padding: 0 14px;
border-radius: 11px;
background: linear-gradient(180deg, #5a8dff 0%, var(--acc) 100%);
color: #fff;
font: inherit; font-size: 13px; font-weight: 700;
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(47,107,255,.2), 0 8px 18px rgba(47,107,255,.18);
}
button.list-create:hover,
.list-create:hover { filter: brightness(1.03); color: #fff; background: var(--acc-hover); }
.list-filters {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
flex: 1 1 640px; justify-content: flex-end;
padding: 10px;
background: rgba(255,255,255,.88);
border: 1px solid rgba(15, 20, 25, .06);
border-radius: 16px;
box-shadow: 0 1px 2px rgba(15,20,25,.03), 0 10px 24px rgba(15,20,25,.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.list-filters .lf {
display: flex; align-items: center; gap: 0;
margin: 0; min-width: 0;
height: 38px;
padding: 0 4px 0 8px;
border-radius: 11px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--faint);
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
cursor: text;
}
.list-filters .lf:hover {
border-color: var(--line-strong); background: var(--surface); color: var(--muted);
}
.list-filters .lf:focus-within {
border-color: #9db6ff; background: var(--surface); color: var(--acc);
box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
.list-filters .lf-ico {
flex: none; width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 8px;
color: inherit;
}
.list-filters .lf input,
.list-filters .lf input[type="search"],
.list-filters .lf input:focus,
.list-filters .lf input[type="search"]:focus {
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 10px 0 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
font: inherit !important;
font-size: 13.5px !important;
font-weight: 550 !important;
color: var(--text) !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.list-filters .lf input::placeholder {
color: var(--faint) !important;
font-weight: 450;
}
.list-filters .lf input[type="search"]::-webkit-search-decoration,
.list-filters .lf input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.list-filters .lf-id { flex: 0 1 132px; max-width: 150px; }
.list-filters .lf-name { flex: 1 1 180px; max-width: 260px; }
.list-filters .lf-host { flex: 1 1 160px; max-width: 220px; }
.list-filters .lf-tag { flex: 0 1 140px; max-width: 180px; }
.list-filters .list-filter-reset {
height: 38px; padding: 0 14px; border-radius: 11px; font-size: 13px;
flex: none;
}
.list-filters .list-filter-reset[hidden] { display: none !important; }
.list-filters.is-active {
border-color: rgba(47,107,255,.18);
box-shadow:
0 0 0 3px rgba(47,107,255,.06),
0 10px 24px rgba(15,20,25,.04);
}
.list-card {
flex: 1; min-height: 0; margin: 0; padding: 0;
display: flex; flex-direction: column; overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(15, 20, 25, .06);
background: rgba(255,255,255,.9);
box-shadow: 0 1px 2px rgba(15,20,25,.03), 0 16px 40px rgba(15,20,25,.06);
}
.list-card .tblbar {
flex: none; padding: 13px 16px; gap: 10px;
border-bottom: 1px solid var(--line);
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.55);
}
.list-card .tbl-wrap {
flex: 1; min-height: 0; overflow: auto;
border-radius: 0;
}
.list-card .pager {
flex: none; padding: 10px 16px; border-top: 1px solid rgba(15, 20, 25, .05);
background: var(--surface-2);
}
.tbl-count {
font-size: 12px; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
padding: 3px 9px; border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(15,20,25,.03);
}
.tbl-wrap { overflow: auto; border-radius: 0 0 20px 20px; }
.tblbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 4px 6px 14px; position: sticky; left: 0;
}
.tblbar b {
font-family: var(--font-display);
font-size: 15px; font-weight: 750; letter-spacing: -.02em;
color: var(--text);
}
.tblbar .tbl-title {
display: flex; align-items: center; gap: 10px; min-width: 0;
}
.list-card .tblbar .date-range,
.list-card .tblbar .arch,
.list-card .tblbar .ghost.ico {
border-color: var(--line-strong);
background: var(--surface);
box-shadow: 0 1px 2px rgba(15,20,25,.05);
}
.tblbar .date-range {
display: inline-flex; align-items: center; gap: 0;
height: 34px; padding: 0 4px 0 12px;
border: 1px solid var(--line); border-radius: 11px;
background: var(--surface); box-shadow: 0 1px 0 rgba(15,20,25,.02);
flex: 0 0 auto;
}
.tblbar .date-range:focus-within {
border-color: #b9c9ff; box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
.tblbar .date-range .dr-lab {
font-size: 10px; font-weight: 750; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); padding-right: 6px;
user-select: none;
}
.tblbar .date-range input[type=date] {
width: 132px; max-width: 132px; height: 28px; margin: 0;
padding: 0 4px; border: 0; border-radius: 6px;
background: transparent; font-size: 12px; font-weight: 550;
color: var(--text); box-shadow: none; outline: none;
}
.tblbar .date-range input[type=date]:focus {
background: var(--surface);
}
.tblbar .date-range .dr-sep {
color: var(--faint); font-size: 12px; font-weight: 600;
padding: 0 2px; user-select: none;
}
.tblbar input[type=date] {
width: 132px; max-width: 132px; height: 32px; padding: 0 8px;
font-size: 12px; border-radius: 8px; flex: 0 0 auto;
}
.arch {
display: inline-flex; align-items: center; gap: 6px; margin: 0;
color: var(--text); font-weight: 650; font-size: 12px;
height: 34px; padding: 0 12px; border-radius: 11px;
border: 1px solid var(--line); background: var(--surface); cursor: pointer;
user-select: none; flex: 0 0 auto;
}
.arch:hover { border-color: #c5d4ff; color: var(--text); }
.arch input { width: 14px; height: 14px; margin: 0; accent-color: var(--acc); }
.list-card .tblbar .ghost.ico {
width: 34px; height: 34px; border-radius: 11px; flex: 0 0 34px;
color: var(--text); font-size: 16px; font-weight: 700;
}
.list-card .tblbar .ghost.ico:hover {
color: var(--acc); border-color: #b9c9ff; background: var(--surface);
}
table.grid {
font-size: 12.5px; min-width: 1100px; border-collapse: separate; border-spacing: 0; width: 100%;
}
table.grid th {
white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--faint); background: var(--surface);
padding: 12px 14px; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--line);
}
table.grid td { padding: 14px; vertical-align: middle; border-bottom: 1px solid var(--line); }
table.grid tbody tr { transition: background .14s ease; }
table.grid tbody tr:hover td { background: var(--surface); }
table.grid tbody tr:last-child td { border-bottom: 0; }
/* App cell */
.col-app { min-width: 240px; width: 26%; }
.col-host { min-width: 140px; width: 14%; }
.col-tags { min-width: 88px; }
.col-created { min-width: 112px; }
.col-naming { min-width: 140px; width: 14%; }
.col-status { min-width: 86px; }
.col-stats { min-width: 140px; }
.col-funnel { min-width: 128px; }
.col-actions { width: 1%; white-space: nowrap; }
.app-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-ico {
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
display: grid; place-items: center; overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(15,20,25,.06), 0 2px 6px rgba(15,20,25,.04);
}
.app-ico-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-ico-letter {
font-family: var(--font-display);
font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.app-ico.t0 { background: var(--surface); color: var(--acc); }
.app-ico.t1 { background: var(--surface); color: #059669; }
.app-ico.t2 { background: var(--surface); color: #c2410c; }
.app-ico.t3 { background: var(--surface); color: #6d28d9; }
.app-ico.t4 { background: var(--surface); color: #0e7490; }
.app-ico.t5 { background: var(--surface); color: #be185d; }
.app-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.app-name {
font-size: 13.5px; font-weight: 700; letter-spacing: -.025em; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.app-sub {
display: flex; align-items: center; gap: 6px; margin-top: 0;
font-size: 11.5px; color: var(--faint); min-width: 0; line-height: 1.3;
}
.app-sub .cat, .app-sub .tariff {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px;
}
.app-sub .dot { opacity: .45; }
.id-chip {
appearance: none; border: 0; height: auto; min-height: 0;
background: var(--surface); color: var(--text);
font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
padding: 2px 7px; border-radius: 6px; cursor: pointer; line-height: 1.4;
box-shadow: none;
}
.id-chip:hover, .id-chip:focus-visible {
background: var(--surface); color: var(--text); outline: none;
}
.hostcell {
display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
min-width: 0; text-align: left;
}
.hostcell .ssl-pill {
font-size: 10px; font-weight: 700; padding: 1px 6px;
letter-spacing: .01em;
}
.host-top,
.host-line {
display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
}
.host-hint {
font-size: 10.5px; font-weight: 550; color: var(--faint); line-height: 1.25;
}
.host-link {
appearance: none; border: 0; height: auto; min-height: 0;
background: transparent; padding: 0; margin: 0;
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
cursor: pointer; text-align: left; border-radius: 0; box-shadow: none;
flex: 0 1 auto;
}
.host-link:hover, .host-link:focus-visible {
background: transparent; color: var(--acc); text-decoration: underline;
text-underline-offset: 2px; outline: none;
}
.host-link:active { background: transparent; color: var(--acc-hover); }
.host-link.is-copied,
.host-link.is-copied:hover {
color: var(--ok); text-decoration: none; font-weight: 650;
}
button.host-tail-link,
.host-tail-link {
appearance: none !important;
flex: 0 0 auto;
height: auto !important; min-height: 0 !important;
padding: 0 !important; margin: 0 !important;
border: 0 !important; border-radius: 0 !important;
background: transparent !important; color: var(--faint) !important;
font: inherit !important; font-size: 11px !important; font-weight: 600 !important;
cursor: pointer; box-shadow: none !important; text-decoration: none !important;
letter-spacing: .01em;
}
button.host-tail-link.host-tail-ico,
.host-tail-link.host-tail-ico {
display: inline-flex !important; align-items: center; justify-content: center;
width: 18px; height: 18px; padding: 2px !important;
border-radius: 4px !important; opacity: .72;
line-height: 0;
}
button.host-tail-link.host-tail-ico svg,
.host-tail-link.host-tail-ico svg {
display: block; width: 12px; height: 12px;
}
button.host-tail-link:hover,
.host-tail-link:hover {
color: var(--acc) !important; text-decoration: underline !important;
text-underline-offset: 2px; filter: none;
}
button.host-tail-link.host-tail-ico:hover,
.host-tail-link.host-tail-ico:hover {
text-decoration: none !important; opacity: 1;
background: color-mix(in srgb, var(--acc) 10%, transparent) !important;
}
.field-links {
display: inline-flex; align-items: center; gap: 10px;
margin-left: 6px; font-weight: 550;
}
.field-links .link.tip {
font-size: 12px; font-weight: 600; color: var(--muted);
}
.field-links .link.tip:hover { color: var(--acc); }
.field-naming .field-hd {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.field-naming .field-hd > label {
margin: 0; font-size: 13px; font-weight: 650; color: var(--text);
}
.field-naming .field-actions {
display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap;
}
.field-naming .field-actions .link.tip {
font-size: 12px; font-weight: 600; color: var(--muted);
text-decoration: none; border-bottom: 1px solid transparent;
}
.field-naming .field-actions .link.tip:hover {
color: var(--acc); border-bottom-color: color-mix(in srgb, var(--acc) 35%, transparent);
}
.field-naming-hint {
margin-top: 8px !important; color: var(--muted) !important; font-weight: 500 !important;
line-height: 1.5 !important;
}
.field-naming-hint .hint-soft {
display: inline; color: var(--faint); font-weight: 500;
}
.field-naming-hint code {
font-size: 11px; padding: 1px 5px; border-radius: 4px;
background: var(--surface); color: var(--text);
}
.id-chip.is-copied,
.id-chip.is-copied:hover {
background: var(--ok-bg); color: var(--ok);
}
.copy-toast,
.app-toast {
position: fixed; left: 50%; bottom: 28px; z-index: 230;
transform: translateX(-50%) translateY(14px);
display: inline-flex; align-items: center; gap: 10px;
max-width: min(440px, calc(100vw - 32px));
padding: 12px 16px 12px 14px; border-radius: 999px;
background: var(--surface-2); color: #fff;
font-size: 13px; font-weight: 650; letter-spacing: -.01em;
box-shadow: 0 12px 32px rgba(16,24,40,.22);
opacity: 0; pointer-events: none;
transition: opacity .2s ease, transform .22s ease;
}
.app-toast-ico {
flex: 0 0 auto;
width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,.12);
color: #fff;
}
.app-toast-msg { min-width: 0; line-height: 1.3; }
.app-toast[data-tone="ok"] { background: #0f766e; }
.app-toast[data-tone="ok"] .app-toast-ico { background: rgba(255,255,255,.18); }
.app-toast[data-tone="err"] { background: #b42318; }
.app-toast[data-tone="warn"] { background: #b54708; }
.app-toast[data-tone="info"] { background: var(--surface-2); }
.copy-toast.on,
.app-toast.on {
opacity: 1; transform: translateX(-50%) translateY(0);
}
/* In-app confirm dialog */
.ui-confirm {
/* Above .modal (240) so confirm works while edit dialogs are open */
position: fixed; inset: 0; z-index: 320;
display: grid; place-items: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
.ui-confirm.hidden { display: none !important; }
.ui-confirm.on { opacity: 1; pointer-events: auto; }
.ui-confirm-backdrop {
position: absolute; inset: 0;
background: rgba(16, 24, 40, .42);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.ui-confirm-card {
position: relative;
width: min(400px, 100%);
padding: 24px 24px 20px;
border-radius: 18px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 24px 64px rgba(16, 24, 40, .22), 0 2px 8px rgba(16, 24, 40, .06);
text-align: center;
transform: translateY(10px) scale(.97);
transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.ui-confirm.ui-confirm-wide .ui-confirm-card { width: min(520px, 100%); text-align: left; }
.ui-confirm.ui-confirm-wide .ui-confirm-ico { margin-left: 0; }
.ui-confirm.ui-confirm-wide .ui-confirm-actions { justify-content: flex-end; }
.ui-confirm.on .ui-confirm-card { transform: translateY(0) scale(1); }
.ui-confirm-lead {
margin: 0 0 14px;
font-size: 13.5px; font-weight: 500;
color: var(--muted); line-height: 1.5;
}
.ui-confirm-lead code {
font-size: 12px; font-weight: 650;
color: var(--acc); background: var(--acc-soft);
padding: 1px 5px; border-radius: 5px;
}
.ui-confirm-diff {
display: grid; gap: 8px;
margin: 0 0 14px;
}
.ui-confirm-diff-row {
display: grid; gap: 4px;
padding: 10px 12px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line);
min-width: 0;
}
.ui-confirm-diff-row.is-next {
background: var(--acc-soft);
border-color: #c7d6f8;
}
.ui-confirm-diff-lab {
font-size: 10px; font-weight: 750;
letter-spacing: .06em; text-transform: uppercase;
color: var(--faint);
}
.ui-confirm-diff-row.is-next .ui-confirm-diff-lab { color: var(--acc); }
.ui-confirm-diff-row code {
display: block;
font-size: 12px; font-weight: 600; line-height: 1.4;
color: var(--text); word-break: break-all;
white-space: pre-wrap;
}
.ui-confirm-note {
margin: 0 0 18px;
font-size: 12.5px; font-weight: 500;
color: var(--muted); line-height: 1.45;
}
.ui-confirm-note b { color: var(--text); font-weight: 700; }
.ui-confirm-ico {
width: 48px; height: 48px; margin: 0 auto 14px;
border-radius: 14px;
display: grid; place-items: center;
background: var(--acc-soft);
color: var(--acc);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent);
}
.ui-confirm-ico svg { width: 22px; height: 22px; }
.ui-confirm[data-tone="warn"] .ui-confirm-ico {
background: var(--surface); color: #dc6803;
box-shadow: inset 0 0 0 1px rgba(220, 104, 3, .16);
}
.ui-confirm[data-tone="ok"] .ui-confirm-ico {
background: var(--ok-bg); color: var(--ok);
box-shadow: inset 0 0 0 1px rgba(23, 178, 106, .16);
}
.ui-confirm-title {
margin: 0 0 8px;
font-size: 17px; font-weight: 750;
letter-spacing: -.03em; color: var(--text);
line-height: 1.25;
}
.ui-confirm-text {
margin: 0 0 20px;
font-size: 13.5px; font-weight: 500;
color: var(--muted); line-height: 1.5;
}
.ui-confirm-text[hidden] { display: none; }
.ui-confirm-actions {
display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.ui-confirm-actions .ghost {
min-width: 100px; height: 36px; border-radius: 10px;
background: var(--surface); border-color: transparent; color: var(--muted);
}
.ui-confirm-actions .ghost:hover {
background: var(--surface); color: var(--text); border-color: transparent;
}
.ui-confirm-ok {
min-width: 140px; height: 36px; border-radius: 10px;
font-weight: 700; letter-spacing: -.01em;
box-shadow: 0 2px 8px rgba(47, 107, 255, .22);
}
.ui-confirm[data-tone="warn"] .ui-confirm-ok {
background: #dc6803;
box-shadow: 0 2px 8px rgba(220, 104, 3, .22);
}
.ui-confirm[data-tone="warn"] .ui-confirm-ok:hover { background: #c25902; }
.ui-confirm[data-tone="ok"] .ui-confirm-ok {
background: var(--ok);
box-shadow: 0 2px 8px rgba(23, 178, 106, .22);
}
.ui-confirm[data-tone="ok"] .ui-confirm-ok:hover { background: #12965a; }
.ui-confirm.ui-confirm-leave .ui-confirm-card {
width: min(420px, 100%);
text-align: left;
}
.ui-confirm.ui-confirm-leave .ui-confirm-ico { margin-left: 0; }
.ui-confirm.ui-confirm-leave .ui-leave-actions {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: stretch;
}
.ui-confirm.ui-confirm-leave .ui-leave-actions > button {
width: 100%;
min-width: 0;
height: 40px;
border-radius: 11px;
font-weight: 650;
}
.ui-confirm.ui-confirm-leave .ui-leave-save {
order: 1;
box-shadow: 0 2px 10px rgba(47, 107, 255, .24);
}
.ui-confirm.ui-confirm-leave .ui-leave-discard {
order: 2;
color: #b54708;
background: var(--surface);
border-color: transparent;
}
.ui-confirm.ui-confirm-leave .ui-leave-discard:hover {
background: #ffead5;
color: #93370d;
}
.ui-confirm.ui-confirm-leave .ui-leave-stay {
order: 3;
background: var(--surface);
color: var(--muted);
}
.ui-confirm.ui-confirm-leave .ui-confirm-text {
margin-bottom: 18px;
}
.row-ico {
flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px;
display: inline-grid; place-items: center; color: var(--faint);
border: 1px solid transparent; opacity: 0; transition: opacity .12s, color .12s, background .12s;
background: transparent; padding: 0; box-shadow: none;
}
.row-ico svg { width: 12px; height: 12px; }
.row-ico:hover { color: var(--acc); background: var(--surface); border-color: transparent; }
table.grid tbody tr:hover .row-ico { opacity: 1; }
.tagrow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tagchip-mini {
appearance: none; border: 1px solid rgba(47,107,255,.14); background: var(--acc-soft); color: var(--acc-hover);
font: inherit; font-size: 10.5px; font-weight: 700; height: 22px; min-height: 22px;
padding: 0 9px; border-radius: 999px; cursor: pointer; line-height: 1;
box-shadow: none;
}
.tagchip-mini:hover, .tagchip-mini:focus-visible {
border-color: rgba(47,107,255,.28); color: var(--acc); background: var(--surface); outline: none;
}
.tag-more { font-size: 10px; font-weight: 650; color: var(--faint); }
.dash { color: var(--faint); }
.metric-row {
display: flex; gap: 12px; align-items: flex-start;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.metric-row span { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.metric-row b { font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.metric-row em {
font-style: normal; font-size: 9.5px; font-weight: 650; letter-spacing: .04em;
text-transform: uppercase; color: var(--faint);
}
.list-grid .pill {
height: 24px; padding: 0 10px; font-size: 11.5px; font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(18, 163, 90, .12);
}
.list-grid .pill.soft { box-shadow: inset 0 0 0 1px rgba(15,20,25,.06); }
.list-grid .pill.arch { box-shadow: inset 0 0 0 1px rgba(15,20,25,.06); }
.list-grid .naming {
max-width: 200px; font-size: 11px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-naming { min-width: 188px; width: 17%; }
button.nk-pick,
.nk-pick {
appearance: none; display: flex !important; align-items: center; gap: 8px;
width: 100%; max-width: 240px; height: auto !important; min-height: 40px;
padding: 5px 8px 5px 7px !important;
border: 1px solid var(--line); border-radius: 12px; background: var(--surface) !important;
color: var(--text); cursor: pointer; text-align: left; font: inherit; font-weight: inherit;
box-shadow: 0 1px 0 rgba(16, 24, 40, .03);
transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .12s ease;
}
button.nk-pick:hover,
.nk-pick:hover {
border-color: #c5d4ff; background: var(--surface) !important;
box-shadow: 0 0 0 3px rgba(47, 107, 255, .07);
filter: none;
}
button.nk-pick.open,
.nk-pick.open {
border-color: #9db6ff; background: var(--surface) !important;
box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}
button.nk-pick.empty,
.nk-pick.empty {
border-style: solid; border-color: var(--line); color: var(--muted); background: var(--surface-2) !important;
}
button.nk-pick.empty:hover,
.nk-pick.empty:hover { color: var(--acc); border-color: #b7c9ff; background: var(--surface) !important; }
.nk-pick-ico {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
display: grid; place-items: center;
background: linear-gradient(145deg, var(--surface), var(--surface));
color: var(--acc); opacity: .95;
}
.nk-pick.empty .nk-pick-ico {
background: var(--surface); color: var(--faint);
}
.nk-pick.open .nk-pick-ico, .nk-pick:hover .nk-pick-ico {
color: var(--acc); background: linear-gradient(145deg, var(--surface), var(--surface));
}
.nk-pick-lab {
min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; line-height: 1.15;
}
.nk-pick-lab b {
font-size: 12.5px; font-weight: 700; letter-spacing: -.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nk-pick-lab code {
display: inline-flex; align-self: flex-start; max-width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10px; font-weight: 600; color: var(--muted);
background: var(--surface); border-radius: 999px; padding: 1px 7px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nk-pick-lab code.nk-pick-os {
font-family: inherit;
background: var(--surface); color: #b54708;
}
.nk-pick-lab em { font-style: normal; font-size: 12px; font-weight: 650; color: var(--muted); }
.nk-pick-chev {
flex: 0 0 auto; color: var(--faint); transition: transform .16s ease, color .12s ease;
}
.nk-pick.open .nk-pick-chev { transform: rotate(180deg); color: var(--acc); }
.nk-pick-pop {
position: fixed; z-index: 80; background: var(--surface);
border: 1px solid var(--line); border-radius: 16px;
box-shadow:
0 22px 48px rgba(16, 24, 40, .16),
0 4px 12px rgba(16, 24, 40, .06),
0 0 0 1px rgba(16, 24, 40, .02);
overflow: hidden; animation: nkPickIn .16s ease;
display: flex; flex-direction: column;
min-height: 0;
}
.nk-pick-pop.busy { opacity: .72; pointer-events: none; }
.nk-pick-pop.nk-pick-up { animation-name: nkPickInUp; }
@keyframes nkPickIn {
from { opacity: 0; transform: translateY(-6px) scale(.98); }
to { opacity: 1; transform: none; }
}
@keyframes nkPickInUp {
from { opacity: 0; transform: translateY(6px) scale(.98); }
to { opacity: 1; transform: none; }
}
.nk-pick-top {
padding: 12px 12px 10px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.nk-pick-title {
display: flex; align-items: center; gap: 8px;
margin: 0 2px 8px;
}
.nk-pick-title b {
font-size: 12px; font-weight: 750; letter-spacing: -.01em; color: var(--text);
}
.nk-pick-count {
min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
display: inline-grid; place-items: center;
font-size: 10px; font-weight: 700; color: var(--acc);
background: var(--acc-soft);
}
.nk-pick-count:empty { display: none; }
.nk-pick-hd { display: block; }
.nk-pick-search {
height: 36px;
border-radius: 10px;
}
.nk-pick-list {
flex: 1 1 auto;
min-height: 0;
max-height: min(340px, 52vh);
overflow: auto;
padding: 6px;
scrollbar-width: thin;
}
.nk-pick-top,
.nk-pick-ft { flex: 0 0 auto; }
.nk-pick-empty {
padding: 28px 16px; text-align: center; color: var(--muted);
}
.nk-pick-empty b {
display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.nk-pick-empty p { margin: 0; font-size: 12px; line-height: 1.4; }
/* Div options — avoid global `button { height:34px; inline-flex }` crushing rows. */
.nk-pick-opt {
width: 100%;
min-height: 56px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
border: 0;
background: transparent;
border-radius: 12px;
padding: 10px;
margin: 0 0 2px;
cursor: pointer;
text-align: left;
color: inherit;
font: inherit;
box-sizing: border-box;
overflow: hidden;
position: relative;
transition: background .1s ease;
}
.nk-pick-opt:last-child { margin-bottom: 0; }
.nk-pick-opt:hover,
.nk-pick-opt.hi {
background: var(--surface);
}
.nk-pick-opt.on {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
box-shadow: inset 0 0 0 1px rgba(47, 107, 255, .12);
}
.nk-pick-opt.on.hi,
.nk-pick-opt.on:hover {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.nk-pick-av {
flex: 0 0 auto; width: 30px; height: 30px; margin-top: 1px; border-radius: 9px;
display: grid; place-items: center;
font-size: 12px; font-weight: 800; letter-spacing: -.02em; color: #fff;
}
.nk-pick-av.t0 { background: linear-gradient(145deg, var(--acc), var(--acc)); }
.nk-pick-av.t1 { background: linear-gradient(145deg, #36cfc9, #13a8a8); }
.nk-pick-av.t2 { background: linear-gradient(145deg, #ff9f43, #f57c00); }
.nk-pick-av.t3 { background: linear-gradient(145deg, #9b7bff, #6c4dff); }
.nk-pick-av.t4 { background: linear-gradient(145deg, #ff6b8a, #e83e6a); }
.nk-pick-av.t5 { background: linear-gradient(145deg, #52c41a, #389e0d); }
.nk-pick-opt-main {
min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px;
padding-right: 2px;
}
.nk-pick-opt-title {
display: block;
font-size: 13px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nk-pick-opt-title mark {
background: #fff3bf; color: inherit; border-radius: 3px; padding: 0 1px;
}
.nk-pick-opt-key {
display: block; min-width: 0; line-height: 1;
}
.nk-pick-opt-key code {
display: inline-block;
max-width: 100%;
box-sizing: border-box;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10.5px; font-weight: 600; color: var(--muted);
background: var(--surface); border-radius: 999px; padding: 2px 7px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
vertical-align: top;
}
.nk-pick-opt-key code mark {
background: #fff3bf; color: inherit; border-radius: 2px;
}
.nk-pick-opt-sub {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
min-width: 0; max-width: 100%;
}
.nk-pick-chip {
display: inline-flex; align-items: center; flex: 0 0 auto;
height: 18px; max-width: 100%; padding: 0 6px;
border-radius: 999px; font-size: 10px; font-weight: 650;
background: var(--surface); color: var(--muted); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.nk-pick-chip.glob { background: var(--surface); color: var(--acc); }
.nk-pick-chip.geo { background: var(--surface); color: #067647; }
.nk-pick-chip.plat { background: var(--surface); color: #b54708; }
.nk-pick-chip.urls { background: var(--surface); color: #5925dc; }
.nk-pick-chip.mute { background: var(--surface); color: var(--faint); }
.nk-pick-check {
flex: 0 0 auto; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%;
display: grid; place-items: center; background: var(--acc); color: #fff;
box-shadow: 0 2px 6px rgba(47, 107, 255, .28);
}
.nk-pick-ft {
display: flex; gap: 8px; padding: 8px 10px 10px;
border-top: 1px solid var(--line); background: var(--surface-2);
}
button.nk-pick-ft-btn,
.nk-pick-ft-btn {
appearance: none; flex: 1; height: 32px !important; border-radius: 9px;
border: 1px solid var(--line); background: var(--surface) !important; color: var(--muted);
font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
button.nk-pick-ft-btn:hover,
.nk-pick-ft-btn:hover {
color: var(--acc); border-color: #c5d4ff; background: var(--surface) !important; filter: none;
}
button.nk-pick-ft-btn.primary,
.nk-pick-ft-btn.primary {
border-color: transparent; background: var(--acc) !important; color: #fff;
}
button.nk-pick-ft-btn.primary:hover,
.nk-pick-ft-btn.primary:hover {
background: var(--acc-hover) !important; color: #fff;
}
.list-grid .created {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; line-height: 1.3; color: var(--text); font-weight: 600;
}
.list-grid .created .muted { font-size: 11px; font-weight: 500; color: var(--faint); }
.list-grid .actions {
gap: 6px;
opacity: 1;
pointer-events: auto;
}
.list-grid .ico {
width: 32px; height: 32px; border-radius: 10px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 1px rgba(15,20,25,.04);
}
.list-grid .ico:hover {
background: var(--surface); color: var(--acc); border-color: #b9c9ff;
}
.list-grid .ico[data-act="arch"]:hover {
background: var(--surface); color: #b54708; border-color: #f9dbaf;
}
.list-grid .ico svg { width: 14px; height: 14px; stroke-width: 1.75; }
.list-empty {
text-align: center; padding: 48px 16px !important; color: var(--muted); font-size: 13px;
}
.num { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.pct { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.ico {
width: 30px; height: 30px; padding: 0; border-radius: 9px;
background: var(--surface); color: var(--muted); border: 1px solid var(--line);
}
.ico svg { width: 14px; height: 14px; display: block; }
.ico:hover { color: var(--acc); border-color: #c5d4ff; background: var(--acc-soft); }
.cellid { display: flex; align-items: center; gap: 6px; }
.host { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bp {
font-size: 10px; font-weight: 700; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted);
border-radius: 6px; padding: 2px 6px; height: 24px; min-width: 28px; cursor: pointer;
}
.bypass-card { width: min(420px, 100%); text-align: left; }
.bypass-url-row { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; }
#bypassUrl {
flex: 1; font-size: 13px; line-height: 1.4; color: var(--text); word-break: break-all;
text-decoration: none; font-weight: 550;
}
#bypassUrl:hover { color: var(--acc); }
#bypassQr { display: block; margin: 16px auto 4px; width: 180px; height: 180px; }
.tip { font-size: 12px; margin-left: 8px; font-weight: 600; }
.ns-status { font-size: 12px; line-height: 1.55; color: var(--muted); margin: 8px 0 0; }
.ns-status .ns-line { margin: 0 0 2px; }
.ns-status .ns-err { color: #d92d20; font-weight: 600; }
.ns-status b { font-weight: 650; }
.ns-copy { width: 22px; height: 22px; display: inline-flex; vertical-align: middle; margin-left: 4px; }
.ns-note { color: var(--faint); margin-top: 2px; }
.domblock { display: flex; flex-direction: column; gap: 0; }
.setup-steps { margin: 0 0 12px; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.5; }
.setup-steps b { font-weight: 650; }
.host-domrow { margin-top: 0; }
.pager {
display: flex; justify-content: flex-end; align-items: center; gap: 8px;
padding: 12px 6px 14px; color: var(--muted); font-size: 13px; font-weight: 600;
}
.pager button {
height: 32px; min-width: 32px; padding: 0 11px; border-radius: 10px;
}
.pager .onpage {
background: var(--acc); color: #fff; border-color: transparent;
box-shadow: 0 4px 12px rgba(47,107,255,.22);
}
.naming { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text); }
.created { white-space: nowrap; font-size: 12px; color: var(--text); }
.created .muted { font-size: 11px; }
.muted { color: var(--muted); }
label.req::before { content: "* "; color: #f04438; }
/* Settings accordions only — do not style header .acc dropdown shell */
details.acc { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px 12px; margin: 10px 0; background: var(--surface); }
details.acc summary { cursor: pointer; font-weight: 650; padding: 12px 0; color: var(--text); }
.chk { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.chk input { width: auto; }
.plats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.plats .chip {
height: 36px; padding: 0 14px; border-radius: 10px; gap: 8px;
transition: border-color .15s, background .15s, color .15s;
}
.plats .chip input { width: auto; margin: 0; accent-color: var(--acc); }
.plats .chip:has(input:checked) {
border-color: #b9c9ff; color: var(--acc); background: var(--acc-soft);
}
/* Settings: platform cards — hide native checkbox (global input{width:100%;height:40px} fights us) */
.plats-seg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0;
}
.plats-seg .plat {
position: relative;
display: block;
margin: 0 !important;
cursor: pointer;
font-size: inherit;
font-weight: inherit;
color: inherit;
}
.plats-seg .plat > input[type="checkbox"] {
position: absolute !important;
inset: 0 !important;
z-index: 2;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer;
background: transparent !important;
box-shadow: none !important;
}
.plats-seg .plat-card {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
min-height: 64px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text);
transition: border-color .15s, background .15s, box-shadow .15s;
}
.plats-seg .plat-ico {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 10px;
display: grid;
place-items: center;
background: var(--surface);
border: 1px solid var(--line);
color: var(--muted);
}
.plats-seg .plat-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.plats-seg .plat-meta b {
font-size: 14px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--text);
}
.plats-seg .plat-meta small {
font-size: 11px;
color: var(--faint);
font-weight: 500;
}
.plats-seg .plat-check {
flex: 0 0 20px;
width: 20px;
height: 20px;
max-width: 20px;
max-height: 20px;
border-radius: 999px;
border: 1.5px solid var(--line-strong);
background: var(--surface);
display: grid;
place-items: center;
transition: border-color .15s, background .15s;
}
.plats-seg .plat-check::after {
content: "";
width: 9px;
height: 5px;
margin-top: -1px;
border-left: 2px solid transparent;
border-bottom: 2px solid transparent;
transform: rotate(-45deg);
}
.plats-seg .plat:hover .plat-card {
border-color: #c5d4ff;
background: var(--surface-2);
}
.plats-seg .plat:has(> input:checked) .plat-card {
border-color: #9db7ff;
background: var(--acc-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 18%, transparent);
}
.plats-seg .plat:has(> input:checked) .plat-ico {
background: var(--surface);
border-color: #c5d4ff;
color: var(--acc);
}
.plats-seg .plat:has(> input:checked) .plat-check {
border-color: var(--acc);
background: var(--acc);
}
.plats-seg .plat:has(> input:checked) .plat-check::after {
border-left-color: var(--line);
border-bottom-color: var(--line);
}
@media (max-width: 560px) {
.plats-seg { grid-template-columns: 1fr; }
}
.swrow {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: 48px; padding: 12px 14px; font-size: 13px; color: var(--text);
border: 0; border-radius: 0; background: transparent; margin: 0;
cursor: pointer; transition: background .15s;
}
label.swrow { font-weight: 500; }
.swrow:hover { background: var(--surface-2); }
.swrow .swtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.swrow .sub { display: block; font-size: 11px; font-weight: 450; color: var(--faint); margin-top: 1px; }
.switch { position: relative; width: 44px; height: 26px; flex: 0 0 44px; margin: 0; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; background: var(--surface-2); border-radius: 22px; transition: .2s; }
.switch i::after {
content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
background: var(--surface); border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(16,24,40,.18);
}
.switch input:checked + i { background: var(--acc); }
.switch input:checked + i::after { transform: translateX(18px); }
/* Settings tab */
.set-pane { display: none; }
.set-pane.on {
display: flex !important; flex-direction: column; gap: 12px;
max-width: 820px;
}
.set-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
padding: 18px 20px;
border-radius: 18px;
background:
radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 55%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.set-hero h2 {
margin: 0 0 4px; font-size: 20px; font-weight: 750; letter-spacing: -.03em;
}
.set-hero p {
margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; max-width: 46ch;
}
.set-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.set-hero-tags span {
height: 26px; padding: 0 10px; border-radius: 999px;
display: inline-flex; align-items: center;
background: var(--surface); border: 1px solid var(--line); color: var(--muted);
font-size: 11px; font-weight: 650;
}
.set-sec {
margin: 0; padding: 0;
border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
box-shadow: var(--shadow);
overflow: hidden;
}
.set-sec-last { margin-bottom: 4px; }
.set-sec-hd {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
margin: 0; padding: 14px 16px;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}
.set-sec-title { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.set-ico {
flex: 0 0 28px; width: 28px; height: 28px; margin-top: 1px;
border-radius: 9px; display: grid; place-items: center;
background: var(--acc-soft); color: var(--acc);
font-size: 12px; font-weight: 800; letter-spacing: -.02em;
}
.set-sec-hd h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.set-sec-hd p { margin: 3px 0 0; color: var(--muted); font-size: 12px; font-weight: 450; line-height: 1.45; }
.set-sec-hd code {
font-size: 11px; padding: 1px 5px; border-radius: 5px;
background: var(--surface); color: var(--text);
}
.set-count {
flex: 0 0 auto; margin-top: 2px;
display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
border-radius: 999px; background: var(--acc-soft); color: var(--acc);
font-size: 12px; font-weight: 650; white-space: nowrap;
}
.set-count.empty { background: var(--surface); color: var(--muted); }
.set-toggles {
display: flex; flex-direction: column; gap: 0;
padding: 4px 0;
}
.set-toggles .swrow + .swrow {
border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.set-toggles .swrow {
margin: 0 8px; border-radius: 12px;
}
.set-sec .plats { padding: 12px 16px 8px; }
.set-sec .hint { margin: 0; padding: 0 16px 14px; color: var(--faint); }
.set-field { margin: 0; padding: 12px 16px 16px; max-width: none; }
.set-field label { margin-bottom: 6px; }
.set-row { margin: 0; padding: 12px 16px 4px; }
.set-accs { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.set-sec .acc {
margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
padding: 0;
}
.set-sec .acc summary {
list-style: none; cursor: pointer; padding: 12px 14px;
font-weight: 650; font-size: 13px; color: var(--text);
}
.set-sec .acc summary::-webkit-details-marker { display: none; }
.set-sec .acc[open] summary {
border-bottom: 1px solid var(--line); background: var(--surface); border-radius: 12px 12px 0 0;
}
.set-sec .acc > :not(summary) { padding: 12px 14px; }
.set-sec .acc textarea { min-height: 110px; }
.cbox {
min-height: 48px; margin: 0 16px; padding: 8px 12px; border-radius: 14px;
background: var(--surface-2); border: 1px solid var(--line-strong); cursor: text;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.cbox.open, .cbox:focus-within {
background: var(--surface);
border-color: #8eafff; box-shadow: 0 0 0 3px rgba(47,107,255,.14);
}
.cbox-in { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; }
.cbox-in input {
flex: 1 1 auto !important;
min-width: 140px !important;
width: auto !important;
height: 30px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 4px !important;
background: transparent !important;
outline: none !important;
}
.cbox-in input:focus { box-shadow: none !important; border: 0 !important; }
.cchip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--acc-soft); color: var(--acc); border-radius: 8px;
padding: 2px 6px 2px 10px; font-size: 12px; font-weight: 650; height: 28px;
}
.cchip em { font-style: normal; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchip b { font-weight: 700; opacity: .7; margin-right: 2px; }
.cx {
width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px;
background: transparent; color: var(--acc); box-shadow: none; font-size: 15px; line-height: 1;
}
.cx:hover { background: var(--surface); }
.cbox-quick {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin: 0; padding: 12px 16px 14px;
}
.cbox-quick-l {
font-size: 11px; font-weight: 650; color: var(--faint); margin-right: 2px;
}
.cbox-qbtn {
height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 550;
background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); cursor: pointer;
}
.cbox-qbtn:hover { border-color: #b9c9ff; color: var(--acc); background: var(--acc-soft); }
.cbox-qbtn.on {
border-color: transparent; background: var(--acc-soft); color: var(--acc); font-weight: 650;
}
.cbox-clear {
margin-left: auto; height: auto; padding: 0 4px; font-size: 12px; font-weight: 600;
}
.cbox-menu {
display: none;
margin: 8px 16px 0;
max-height: 260px;
overflow: auto;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
padding: 6px;
}
.cbox-menu.open { display: block; }
.cbox-menu .copt { border-radius: 10px; }
@media (max-width: 720px) {
.set-hero { flex-direction: column; align-items: flex-start; }
.set-hero-tags { justify-content: flex-start; }
}
.copt {
width: 100%; min-height: 36px; padding: 8px 10px; border-radius: 8px;
border: 0; background: transparent; color: var(--text); cursor: pointer;
display: flex; align-items: center; gap: 10px; text-align: left;
font: inherit; font-weight: 550; box-shadow: none;
}
.copt:hover { background: var(--surface); }
.copt.on { background: var(--acc-soft); color: var(--acc); }
.copt .ccode {
flex: 0 0 28px; font-size: 11px; font-weight: 700; color: var(--faint);
font-variant-numeric: tabular-nums;
}
.copt.on .ccode { color: var(--acc); }
.copt .cname { flex: 1; min-width: 0; }
.copt .cmark {
width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-strong);
display: grid; place-items: center; font-size: 11px; color: transparent; background: var(--surface);
}
.copt.on .cmark { border-color: var(--acc); background: var(--acc); color: #fff; }
.cempty { padding: 14px 10px; color: var(--faint); font-size: 12px; text-align: center; }
@media (max-width: 720px) {
.set-row.row3 { grid-template-columns: 1fr; }
.cbox-clear { margin-left: 0; width: 100%; text-align: left; }
}
.form-foot {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
margin: 0; padding: 10px 16px;
background: var(--surface);
border-top: 1px solid var(--line);
box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
}
.form-foot-inner {
max-width: 1180px; margin: 0 auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
#pane-met .hint-card { margin: 4px 0 16px; }
.met-sec {
margin: 0 0 14px; padding: 16px 16px 14px;
border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2);
}
.met-sec:last-of-type { margin-bottom: 4px; }
.met-sec-hd {
display: flex; align-items: center; gap: 12px;
margin: 0 0 14px; padding: 0 0 14px;
border-bottom: 1px solid var(--line);
}
.met-sec-hd h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.met-sec-hd p { margin: 2px 0 0; color: var(--faint); font-size: 12px; font-weight: 450; line-height: 1.4; }
.met-logo {
width: 36px; height: 36px; border-radius: 10px; flex: none;
display: grid; place-items: center;
font-size: 18px; font-weight: 800; line-height: 1;
}
.met-logo.fb { background: var(--surface); color: #1877f2; }
.met-logo.tw { background: var(--surface); color: var(--text); font-size: 15px; }
.met-sub {
margin: 0 0 14px; padding: 0 0 14px;
border-bottom: 1px solid var(--line);
}
.met-sub.last { margin: 0; padding: 0; border-bottom: 0; }
.met-sub-h { margin: 0 0 10px; }
.met-sub-h b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.met-sub-h span { display: block; margin-top: 2px; color: var(--faint); font-size: 12px; font-weight: 450; line-height: 1.4; }
.met-sub-h code {
font-size: 11px; padding: 1px 5px; border-radius: 5px;
background: var(--surface); border: 1px solid var(--line);
}
#pane-met .field > label em {
font-style: normal; color: var(--faint); font-weight: 550; margin-left: 4px;
}
.met-opt {
font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
color: var(--acc); background: var(--acc-soft); border-radius: 4px;
padding: 1px 5px; margin-left: 4px; vertical-align: 1px;
}
.met-key { max-width: 220px; margin: 0; }
.met-key-note { margin: 0; }
.met-key-chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 8px;
}
.met-key-chip {
display: inline-flex; align-items: center;
padding: 4px 9px; border-radius: 8px;
background: var(--surface); border: 1px solid var(--line);
color: var(--text); font-size: 12px; font-weight: 700;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .01em;
}
.met-key-note .hint {
margin: 0;
font-size: 12px; color: var(--muted); line-height: 1.4;
}
.met-key-note .hint code {
font-size: 11.5px; font-weight: 650;
padding: 1px 5px; border-radius: 5px;
background: var(--surface); color: var(--text);
}
.met-list { display: flex; flex-direction: column; gap: 8px; }
.metrow {
display: grid;
grid-template-columns: minmax(140px, .9fr) minmax(180px, 1.3fr) auto;
gap: 10px 12px; align-items: end;
padding: 12px; border-radius: 12px;
background: var(--surface); border: 1px solid var(--line);
}
.metrow.verify { grid-template-columns: 1fr auto; }
.metrow .field { margin: 0; }
.metrow .field > label { margin-bottom: 5px; }
.met-row-tools {
display: flex; align-items: center; gap: 8px;
min-height: 40px;
padding-bottom: 0;
flex-wrap: nowrap;
justify-content: flex-end;
}
.pix-capi {
font-size: 10px; font-weight: 800; letter-spacing: .04em;
padding: 4px 8px; border-radius: 999px;
background: var(--surface); color: var(--faint);
line-height: 1;
white-space: nowrap;
}
.pix-capi.on { background: var(--ok-bg); color: var(--ok); }
.metrow .switch {
position: relative;
width: 42px; height: 24px;
flex: 0 0 42px;
display: inline-block;
margin: 0;
cursor: pointer;
}
.metrow .switch input {
opacity: 0;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
position: absolute;
margin: 0;
pointer-events: none;
}
.metrow .switch i {
position: absolute; inset: 0;
background: var(--surface-2);
border-radius: 999px;
transition: background .18s ease;
}
.metrow .switch i::after {
content: "";
position: absolute;
width: 18px; height: 18px;
left: 3px; top: 3px;
background: var(--surface);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
transition: transform .18s ease;
transform: translateX(0);
}
.metrow .switch input:checked + i { background: var(--acc); }
.metrow .switch input:checked + i::after { transform: translateX(18px); }
.metrow .met-row-tools .ico {
width: 34px; height: 34px;
flex: 0 0 34px;
border-radius: 10px;
display: grid; place-items: center;
}
.metrow .pix-del { color: var(--faint); }
.metrow .pix-del:hover { color: #d92d20; border-color: #fecdca; background: var(--surface); }
.met-add {
margin-top: 10px; height: 34px; padding: 0 12px;
border-style: dashed; color: var(--muted); font-weight: 600;
}
.met-add:hover { border-style: solid; }
.met-test-bar {
display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px;
}
.met-test-btn { height: 34px; padding: 0 12px; font-weight: 600; }
.met-test-status {
margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
font-size: 12px; font-weight: 550; line-height: 1.4;
background: var(--surface); color: var(--muted); word-break: break-word;
}
.met-test-status.ok { background: var(--ok-bg); color: var(--ok); }
.met-test-status.err { background: var(--surface); color: #d92d20; }
.met-log-wrap {
border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
overflow: auto; max-height: 240px;
}
.met-log {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.met-log th, .met-log td {
padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line);
white-space: nowrap;
}
.met-log th {
position: sticky; top: 0; background: var(--surface);
font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: .02em;
}
.met-log tr:last-child td { border-bottom: 0; }
.met-log td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.met-ok, .met-err {
display: inline-block; padding: 2px 7px; border-radius: 6px;
font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.met-ok { background: var(--ok-bg); color: var(--ok); }
.met-err { background: var(--surface); color: #d92d20; }
.met-test-tag {
font-style: normal; font-size: 10px; font-weight: 700;
color: var(--acc); margin-left: 4px;
}
.met-log-empty {
margin: 0; padding: 14px 12px; color: var(--faint);
font-size: 12px; text-align: center;
}
button.plus { width: 36px; height: 32px; padding: 0; margin-top: 4px; }
.csel { position: relative; width: 100%; }
.csel-native {
position: absolute !important; opacity: 0 !important; pointer-events: none !important;
width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important;
}
.csel-btn {
width: 100%; height: 40px; padding: 0 36px 0 12px; border-radius: 10px;
background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
font: inherit; font-weight: 550; justify-content: flex-start; text-align: left;
box-shadow: none; position: relative; display: flex;
}
.csel-btn:hover { background: var(--surface); color: var(--text); border-color: #8eafff; }
.csel.open .csel-btn, .csel-btn:focus {
outline: none; border-color: #8eafff; box-shadow: 0 0 0 3px rgba(47,107,255,.16);
}
.csel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-btn svg {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: var(--muted); flex: none;
}
.csel.open .csel-btn svg { transform: translateY(-50%) rotate(180deg); }
.csel-menu {
display: none; position: fixed; z-index: 400;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
padding: 6px; max-height: 280px; overflow: auto;
}
.csel-menu.open { display: block; }
.csel-opt {
width: 100%; min-height: 36px; height: auto; padding: 8px 10px; border-radius: 8px;
background: transparent; color: var(--text); border: 0; box-shadow: none;
font: inherit; font-weight: 500; justify-content: space-between; text-align: left;
display: flex;
}
.csel-opt:hover { background: var(--surface); color: var(--text); }
.csel-opt.on { background: var(--acc-soft); color: var(--acc); font-weight: 650; }
.csel-opt.on::after { content: "✓"; font-size: 13px; color: var(--acc); }
.csel-opt.hi { background: var(--acc-soft); }
.dcal { position: relative; width: 100%; }
.dcal-trigger {
width: 100%; height: 40px; padding: 0 40px 0 12px; border-radius: 10px;
background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
font: inherit; font-weight: 550; justify-content: flex-start; text-align: left;
box-shadow: none; position: relative; display: flex; align-items: center;
cursor: pointer;
}
.dcal-trigger:hover { border-color: #8eafff; color: var(--text); background: var(--surface); }
.dcal.open .dcal-trigger, .dcal-trigger:focus {
outline: none; border-color: #8eafff; box-shadow: 0 0 0 3px rgba(47,107,255,.16);
}
.dcal-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcal-trigger svg {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.dcal.open .dcal-trigger svg { color: var(--acc); }
.dcal-menu {
display: none; position: fixed; z-index: 420;
background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
padding: 12px; width: 308px;
opacity: 0; transform: translateY(4px) scale(.98);
transition: opacity .16s ease, transform .16s ease;
}
.dcal-menu.open {
display: block; opacity: 1; transform: translateY(0) scale(1);
}
.dcal-head {
display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.dcal-title {
flex: 1; text-align: center; font-weight: 700; font-size: 14px;
letter-spacing: -.02em;
}
.dcal-nav {
width: 34px; height: 34px; padding: 0; border-radius: 10px;
border: 1px solid var(--line); background: var(--surface); color: var(--muted);
font-size: 18px; line-height: 1; box-shadow: none; flex: none;
}
.dcal-nav:hover { border-color: #8eafff; color: var(--acc); background: var(--acc-soft); }
.dcal-week {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
margin-bottom: 4px;
}
.dcal-week span {
height: 28px; display: grid; place-items: center;
color: var(--faint); font-size: 11px; font-weight: 650;
}
.dcal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.dcal-day {
height: 36px; padding: 0; border: 0; border-radius: 10px;
background: transparent; color: var(--text); font: inherit; font-weight: 600;
box-shadow: none; display: grid; place-items: center;
}
.dcal-day:hover:not(.empty) { background: var(--surface); color: var(--text); }
.dcal-day.empty { pointer-events: none; }
.dcal-day.today { box-shadow: inset 0 0 0 1.5px #b7c9ff; color: var(--acc); }
.dcal-day.on {
background: var(--acc); color: #fff; font-weight: 700;
box-shadow: none;
}
.dcal-day.on:hover { background: var(--acc-hover); color: #fff; }
.dcal-day.on.today { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.dcal-foot { margin-top: 8px; display: flex; justify-content: center; }
.dcal-today {
height: 32px; padding: 0 14px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface); color: var(--acc);
font: inherit; font-weight: 650; box-shadow: none;
}
.dcal-today:hover { border-color: #8eafff; background: var(--acc-soft); }
/* Range calendar — shared shell (list / stats / push) */
.rcal-native-hid { display: none !important; }
.rcal {
display: inline-flex; align-items: center; gap: 2px;
min-width: 0;
height: 34px;
padding: 0 4px 0 4px;
border: 1px solid var(--line-strong);
border-radius: 11px;
background: var(--surface);
box-shadow: 0 1px 2px rgba(15,20,25,.05);
flex: 0 0 auto;
}
.rcal:has(.rcal-field.is-open) {
border-color: #b9c9ff;
box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
.date-range.rcal-shell {
display: inline-flex; align-items: center; gap: 0;
height: 34px; padding: 0 4px 0 12px;
border: 1px solid var(--line-strong); border-radius: 11px;
background: var(--surface); box-shadow: 0 1px 2px rgba(15,20,25,.05);
flex: 0 0 auto;
}
.date-range.rcal-shell:has(.rcal-field.is-open),
.date-range.rcal-shell:focus-within {
border-color: #b9c9ff; box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
.date-range.rcal-shell .rcal {
border: 0; box-shadow: none; background: transparent;
height: auto; padding: 0; flex: 1 1 auto; min-width: 0;
}
.date-range.rcal-shell .dr-lab {
font-size: 10px; font-weight: 750; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted); padding-right: 6px;
user-select: none; flex: 0 0 auto;
}
.ps-toolbar .rcal {
display: inline-flex;
align-items: center;
align-self: center;
width: max-content;
min-width: 272px;
flex: 0 0 auto;
min-height: var(--st-ctl-h, 32px);
}
.rcal-field {
appearance: none; flex: 1 1 0; min-width: 0;
display: inline-flex; align-items: center; gap: 5px;
height: 28px !important; padding: 0 8px !important; margin: 0;
border: 0 !important; border-radius: 7px !important;
background: transparent !important; color: var(--text);
font: inherit; font-size: 12.5px !important; font-weight: 550 !important;
cursor: pointer; box-shadow: none !important; text-align: left;
filter: none !important;
}
.rcal-field:hover {
background: var(--surface) !important;
filter: none;
}
.rcal-field.is-open {
background: var(--surface) !important;
color: var(--acc);
filter: none;
}
.rcal-k {
font-size: 11px; font-weight: 650; letter-spacing: 0;
text-transform: none; color: var(--faint);
flex: 0 0 auto; line-height: 1;
}
.rcal-field.is-open .rcal-k { color: var(--acc); }
.rcal-val {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text);
line-height: 1;
}
.rcal-sep {
color: var(--faint); font-size: 12px; line-height: 1;
flex: 0 0 auto; user-select: none; display: inline-flex;
align-items: center; justify-content: center; width: 14px;
}
.rcal-menu {
display: none; position: fixed; z-index: 430;
background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
box-shadow: 0 18px 40px rgba(16, 24, 40, .16), 0 2px 6px rgba(16,24,40,.05);
padding: 12px; width: 308px;
}
.rcal-menu.open { display: block; }
.rcal-head {
display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.rcal-title {
flex: 1; text-align: center; font-weight: 750; font-size: 13.5px;
letter-spacing: -.02em; color: var(--text);
}
.rcal-nav {
width: 32px; height: 32px; padding: 0; border-radius: 9px;
border: 1px solid var(--line); background: var(--surface); color: var(--muted);
font-size: 17px; line-height: 1; box-shadow: none; flex: none; cursor: pointer;
}
.rcal-nav:hover { border-color: #b9c9ff; color: var(--acc); background: var(--surface); }
.rcal-hint {
font-size: 11.5px; color: var(--faint); font-weight: 550;
margin: 0 2px 8px; line-height: 1.35;
}
.rcal-hint b { color: var(--muted); font-weight: 700; }
.rcal-week {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin-bottom: 2px;
}
.rcal-week span {
height: 26px; display: grid; place-items: center;
color: var(--faint); font-size: 10.5px; font-weight: 700;
}
.rcal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
}
.rcal-day {
height: 36px; padding: 0; border: 0; border-radius: 0;
background: transparent; color: var(--text);
font: inherit; font-size: 12.5px; font-weight: 600;
box-shadow: none; display: grid; place-items: center; cursor: pointer;
position: relative; z-index: 0;
}
.rcal-day.mute { color: var(--faint); }
.rcal-day:hover:not(.in):not(.start):not(.end) { background: var(--surface); border-radius: 9px; }
.rcal-day.today:not(.start):not(.end) { box-shadow: inset 0 0 0 1.5px #c5d4ff; border-radius: 9px; color: var(--acc); }
.rcal-day.in.range,
.rcal-day.in.preview {
background: var(--surface); color: #1e3a5f; border-radius: 0;
}
.rcal-day.in.preview { background: var(--surface); }
.rcal-day.start,
.rcal-day.end {
background: var(--acc) !important; color: #fff !important;
border-radius: 9px; z-index: 1; font-weight: 750;
box-shadow: none;
}
.rcal-day.start.in.range,
.rcal-day.start.in.preview { border-radius: 9px 0 0 9px; }
.rcal-day.end.in.range,
.rcal-day.end.in.preview { border-radius: 0 9px 9px 0; }
.rcal-day.start.end { border-radius: 9px !important; }
.rcal-foot {
margin-top: 10px; display: flex; justify-content: space-between; gap: 8px;
}
.rcal-link {
appearance: none; border: 0; background: transparent; padding: 4px 2px;
color: var(--acc); font: inherit; font-size: 12.5px; font-weight: 650;
cursor: pointer; box-shadow: none;
}
.rcal-link:hover { color: var(--acc-hover); text-decoration: underline; }
.tagbox {
min-height: 40px; padding: 4px 36px 4px 8px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--line-strong); position: relative;
cursor: text;
}
.tagbox.open, .tagbox:focus-within {
border-color: #8eafff; box-shadow: 0 0 0 3px rgba(47,107,255,.16);
}
.tagbox-in { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; }
.tagbox-in input {
flex: 1 1 auto !important;
min-width: 80px !important;
width: auto !important;
height: 28px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 4px !important;
background: transparent !important;
outline: none !important;
}
.tagbox-in input:focus { box-shadow: none !important; border: 0 !important; }
.tagbox-ico {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
.tagbox-ico svg { width: 18px; height: 18px; display: block; }
.tagchip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--surface); color: var(--text); border-radius: 6px;
padding: 2px 6px 2px 8px; font-size: 13px; font-weight: 550; height: 26px;
}
.tagchip em { font-style: normal; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagx {
width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px;
background: transparent; color: var(--muted); box-shadow: none; font-size: 15px; line-height: 1;
}
.tagx:hover { background: var(--surface-2); color: var(--text); }
.tagmenu {
display: none; position: fixed; z-index: 400;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
padding: 6px; overflow: auto;
}
.tagmenu.open { display: block; }
.tagopt {
width: 100%; min-height: 36px; padding: 8px 10px; border-radius: 8px;
background: transparent; color: var(--text); border: 0; box-shadow: none;
font: inherit; font-weight: 550; text-align: left;
display: flex; justify-content: space-between; align-items: center;
}
.tagopt:hover { background: var(--surface); color: var(--text); }
.tagopt.on { background: var(--acc-soft); }
.tagopt.on::after { content: "✓"; font-size: 14px; color: var(--acc); font-weight: 700; }
.tagopt.create { color: var(--acc); font-weight: 650; }
.tagempty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.bp[data-act="tag"]:hover { border-color: #8eafff; color: var(--acc); background: var(--acc-soft); }
.sec-domain { padding-top: 2px; }
.main-dom-wrap {
margin: 0;
padding: 0;
border: 0;
background: transparent;
border-radius: 0;
}
.main-dom-empty {
display: none;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
border-radius: 12px;
border: 1px dashed var(--line-strong);
background: var(--surface-2);
}
.main-dom-wrap.is-empty .main-dom-empty { display: flex; }
.main-dom-wrap.is-empty .main-dom-filled { display: none !important; }
.main-dom-hint { font-size: 13px; color: var(--muted); font-weight: 500; }
.main-dom-cta {
flex: 0 0 auto; height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
background: var(--acc); color: #fff; font-size: 13px; font-weight: 650; cursor: pointer;
}
.main-dom-cta:hover { filter: brightness(1.06); }
.main-dom-filled { display: block; }
.main-dom-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(160px, .9fr);
gap: 12px 16px;
align-items: end;
}
.main-dom-host-field,
.main-dom-cf-field { margin: 0; min-width: 0; }
.main-dom-hostline {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
height: 42px;
padding: 0 8px 0 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
}
.main-dom-name {
flex: 1;
min-width: 0;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
height: auto !important;
font-size: 14px;
font-weight: 650;
letter-spacing: -.02em;
color: var(--text);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-dom-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
.main-dom-actions button[data-dom="enable"] {
height: 30px; padding: 0 12px; border-radius: 8px; border: 0;
font-size: 12px; font-weight: 650; cursor: pointer;
background: var(--acc); color: #fff;
}
.main-dom-actions button[data-dom="enable"]:hover { filter: brightness(1.05); }
.main-dom-actions button[data-dom="enable"].on {
background: var(--surface); color: #b54708; border: 1px solid #f9dbaf;
box-shadow: none;
}
.main-dom-actions button[data-dom="enable"].on:hover {
background: var(--surface); filter: none;
}
.main-dom-actions button[data-dom="enable"]:disabled {
opacity: .7; cursor: wait; filter: none;
}
.main-dom-swap {
height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px;
font-weight: 650; color: var(--text); background: var(--surface); border: 1px solid transparent;
}
.main-dom-swap:hover { background: var(--surface); color: var(--text); }
.main-dom-swap:disabled {
opacity: .45; cursor: not-allowed;
}
.main-dom-cf-sel {
width: 100%;
height: 42px;
padding: 0 12px;
font-size: 13px;
font-weight: 550;
}
.main-dom-status {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
padding: 10px 12px;
border-radius: 10px;
font-size: 13px;
font-weight: 550;
line-height: 1.35;
}
.main-dom-status[hidden] { display: none !important; }
.main-dom-status.is-on {
background: var(--surface);
border: 1px solid #abefc6;
color: #067647;
}
.main-dom-status.is-warn {
background: var(--surface);
border: 1px solid #fedf89;
color: #b54708;
}
.main-dom-status.is-bad {
background: var(--surface);
border: 1px solid #fecdca;
color: #b42318;
}
.main-dom-status.is-off {
background: var(--surface);
border: 1px solid #f9dbaf;
color: #b54708;
}
.main-dom-status .mds-pill {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 700; letter-spacing: -.01em;
}
.main-dom-status .mds-pill::before {
content: "";
width: 7px; height: 7px; border-radius: 50%;
background: currentColor;
}
.main-dom-status .mds-meta { color: inherit; opacity: .85; font-weight: 500; }
.main-dom-status .mds-link {
margin-left: auto;
color: var(--acc);
font-weight: 650;
text-decoration: none;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
font: inherit;
}
.main-dom-status .mds-link:hover { text-decoration: underline; }
.main-dom-status.is-off .mds-link { color: #b54708; }
.main-dom-wrap .ns-status { margin: 10px 0 0; }
@media (max-width: 900px) {
.main-dom-grid { grid-template-columns: 1fr; }
.main-dom-hostline { height: auto; min-height: 42px; padding: 8px; flex-wrap: wrap; }
.main-dom-name { flex: 1 1 100%; white-space: normal; }
.main-dom-actions { width: 100%; justify-content: flex-end; }
.main-dom-status .mds-link { margin-left: 0; width: 100%; }
}
.dom-intro { margin-bottom: 16px; }
.dom-section { margin: 0 0 18px; }
.dom-section-hd {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text);
}
.dom-section-note { font-size: 12px; font-weight: 500; color: var(--muted); }
.dom-alias-list { display: flex; flex-direction: column; gap: 10px; }
.dom-add-btn { margin-top: 10px; }
.domrow {
display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap;
}
.domrow.dom-card {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px;
margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
background: var(--surface); align-items: center;
}
.domblock.is-on .dom-card { border-color: #abefc6; background: var(--surface); }
.dom-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.domrow input, .domrow input.dom-host {
flex: 1; min-width: 0; max-width: none; border: 0; background: transparent;
padding: 0; height: auto; font-size: 14px; font-weight: 650; color: var(--text);
box-shadow: none;
}
.domrow input:disabled, .domrow input:read-only { background: transparent; color: var(--text); }
.dom-pill {
flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
background: var(--surface); color: var(--text); white-space: nowrap;
}
.dom-pill.ok { background: #d1fadf; color: #067647; }
.dom-pill.warn { background: #feefc6; color: #b54708; }
.dom-pill.info { background: var(--acc-soft); color: var(--acc); }
.dom-pill.muted { background: var(--surface); color: var(--faint); }
.ssl-pill {
flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
background: var(--surface); color: var(--muted); white-space: nowrap;
}
.ssl-pill.ok { background: #d1fadf; color: #067647; }
.ssl-pill.warn { background: #feefc6; color: #b54708; }
.ssl-pill.bad { background: var(--surface); color: #b42318; }
.ssl-pill.muted { background: var(--surface); color: var(--faint); }
.main-dom-status .ssl-pill { margin: 0; }
.dom-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dom-act {
height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 650;
border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer;
}
.dom-act.primary { background: var(--acc); border-color: transparent; color: #fff; }
.dom-act.primary.on {
background: var(--surface); border-color: #f9dbaf; color: #b54708;
}
.dom-act.primary.on:hover { background: var(--surface); filter: none; color: #93370d; }
.dom-act.danger { color: #b42318; border-color: #fecdca; }
.dom-act.danger:hover { background: var(--surface); }
.dom-act:hover { border-color: #c5d4ff; color: var(--acc); }
.dom-act.primary:hover { filter: brightness(1.05); color: #fff; }
.cfbadge {
font-size: 10px; font-weight: 800; letter-spacing: .04em;
background: #f38020; color: #fff; border-radius: 6px; padding: 3px 6px;
}
.cfbadge.off { background: var(--surface-2); }
.lamp.on { color: #dc6803; border-color: #f7b27a; background: var(--surface); }
.lamp.ok { color: #17b26a; border-color: #abefc6; background: var(--surface); }
.domerr {
grid-column: 1 / -1; width: auto; font-size: 12px; color: #b54708; margin: 0;
background: var(--warn-bg); border: 1px solid #f7b27a; border-radius: 10px; padding: 8px 10px;
}
@media (max-width: 720px) {
.domrow.dom-card { grid-template-columns: 1fr; }
.dom-actions { justify-content: flex-start; }
}
.ns-status, .hint-card {
margin: 6px 0 14px; padding: 12px 14px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--line);
}
.ns-status.ok, .hint-card.ok { background: var(--ok-bg); border-color: #abefc6; }
.ns-status.warn { background: var(--warn-bg); border-color: #f7d7a8; }
.hint-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hint-pill {
font-size: 11px; font-weight: 700; letter-spacing: .01em;
padding: 4px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text);
}
.hint-pill.info { background: var(--acc-soft); color: var(--acc); }
.hint-pill.warn { background: #feefc6; color: #b54708; }
.hint-pill.ok { background: #d1fadf; color: #067647; }
.hint-k { color: var(--muted); font-size: 11px; font-weight: 650; min-width: 64px; }
.hint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.hint-chip {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px; background: var(--surface); border: 1px solid var(--line);
border-radius: 8px; padding: 4px 8px; color: var(--text);
}
.hint-muted { color: var(--faint); font-size: 12px; }
.hint-foot { margin: 8px 0 0; color: var(--faint); font-size: 12px; line-height: 1.45; }
.hint-foot.quiet { margin: 0 0 10px; }
.hint-steps { margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.55; }
.hint-dns {
margin-top: 8px; font-size: 12px; padding: 8px 10px; border-radius: 8px;
background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.hint-dns.ok { background: var(--surface); border-color: #abefc6; color: #067647; }
.hint-dns.bad { background: var(--surface); border-color: #f7d7a8; color: #b54708; }
.link-hints {
display: flex; flex-direction: column; gap: 14px;
margin-top: 4px; padding-top: 4px;
}
.dom-links-sec { display: flex; flex-direction: column; gap: 6px; }
.dom-links-hd {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
padding: 0 2px;
}
.dom-links-hd > span {
font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.dom-links-hd > em {
font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--faint); line-height: 1.35;
}
.dom-links-hd code {
font-size: 11px; font-weight: 650; color: var(--muted);
background: var(--surface); padding: 1px 5px; border-radius: 5px;
}
.dom-links-list {
display: flex; flex-direction: column; gap: 5px;
padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.link-hints .link-row {
display: grid; grid-template-columns: minmax(128px, 150px) minmax(0, 1fr) 30px;
align-items: center; gap: 8px;
background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
padding: 6px 8px; margin: 0;
}
.link-hints .link-row .hint-k {
min-width: 0; flex: none;
font-size: 12px; font-weight: 650; color: var(--text); line-height: 1.25;
}
.link-hints .link-row code {
flex: none; min-width: 0; width: 100%;
font-size: 11px; font-weight: 550; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
background: var(--surface); border: 0; border-radius: 7px; padding: 5px 8px;
}
.link-hints .link-row .ns-copy {
width: 30px !important; height: 30px !important; min-height: 0 !important;
padding: 0 !important; border-radius: 8px !important;
border: 1px solid var(--line) !important; background: var(--surface) !important;
color: var(--muted) !important; box-shadow: none !important;
}
.link-hints .link-row .ns-copy:hover {
color: var(--acc) !important; border-color: #b9c9ff !important;
background: var(--acc-soft) !important; filter: none;
}
@media (max-width: 720px) {
.link-hints .link-row {
grid-template-columns: 1fr 30px;
grid-template-rows: auto auto;
}
.link-hints .link-row .hint-k { grid-column: 1 / -1; }
.link-hints .link-row code { grid-column: 1; }
}
#addDomHint { color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 0; }
#addDomErr:empty, #addDomHint:empty { display: none; }
#addDomErr { background: var(--surface); border: 1px solid #f7d7a8; border-radius: 10px; padding: 8px 10px; }
.search-wrap { display: flex; align-items: center; gap: 8px; }
.search-wrap input { flex: 1; }
.add-dom-owned { margin: 2px 0 10px; }
.add-dom-owned-hd {
display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.add-dom-owned-hd label { margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.add-dom-owned-hd .linkish { font-size: 12px; padding: 2px 6px; height: auto; }
.add-dom-owned-list {
display: flex; flex-wrap: wrap; gap: 6px; max-height: 140px; overflow: auto;
padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.add-dom-owned-list:empty { display: none; }
.add-dom-chip {
border: 1px solid var(--line); background: var(--surface); color: var(--text);
border-radius: 999px; padding: 5px 10px; font-size: 12px; cursor: pointer; line-height: 1.2;
}
.add-dom-chip:hover { border-color: #93c5fd; background: var(--surface); }
.add-dom-chip.on { border-color: #2563eb; background: var(--surface); font-weight: 600; }
#addDomOwnedHint { margin: 6px 0 0; font-size: 12px; }
#addDomOwnedHint:empty { display: none; }
.add-dom-price {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin: 4px 0 2px; padding: 12px 14px; border-radius: 12px;
background: linear-gradient(135deg, var(--surface) 0%, var(--surface) 100%);
border: 1px solid var(--line);
}
.add-dom-price .adp-label { font-size: 12px; color: var(--muted); }
.add-dom-price .adp-sum { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.add-dom-price .adp-meta { font-size: 12px; color: var(--text); text-align: right; }
.add-dom-price.bad { background: var(--surface); border-color: #fecaca; }
.add-dom-progress {
display: flex; align-items: flex-start; gap: 12px;
margin: 6px 0 2px; padding: 12px 14px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--line);
}
.add-dom-progress b { display: block; font-size: 14px; margin-bottom: 2px; }
.add-dom-progress p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.35; }
.add-dom-spinner {
width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto;
border: 2.5px solid var(--line); border-top-color: #2563eb; border-radius: 50%;
animation: addDomSpin 0.7s linear infinite;
}
@keyframes addDomSpin { to { transform: rotate(360deg); } }
#addDomModal.busy .field,
#addDomModal.busy #addDomPrice { opacity: 0.55; pointer-events: none; }
#addDomOk[disabled], #addDomCancel[disabled] { opacity: 0.55; cursor: wait; }
.preview-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: 22px;
align-items: start;
}
.preview-split-form,
.desc-form,
.preview-slot { min-width: 0; }
body.on-preview .page,
body.view-edit.on-preview .page { max-width: 1540px; }
body.on-preview .form-foot-inner,
body.view-edit.on-preview .form-foot-inner { max-width: 1540px; }
.store-preview {
--spv-foot: 72px; /* fixed form-foot clearance */
--spv-top: 64px;
position: sticky;
top: var(--spv-top);
align-self: start;
width: 100%;
/* definite height so the phone can fill the panel */
height: calc(100vh - var(--spv-top) - var(--spv-foot));
max-height: calc(100vh - var(--spv-top) - var(--spv-foot));
overflow: hidden;
display: flex;
flex-direction: column;
padding-bottom: 0;
z-index: 1; /* always under .form-foot */
box-sizing: border-box;
}
.desc-default-lang { margin: 0; min-width: 200px; }
.desc-default-lang label { margin-bottom: 6px; }
.desc-jump {
position: sticky; top: 56px; z-index: 20;
display: flex; gap: 4px; flex-wrap: wrap;
margin: 0 0 16px; padding: 8px 0 10px;
background: var(--surface);
border-bottom: 1px solid var(--line);
/* Solid sticky bar — blur here made the top stutter on scroll */
}
.desc-jump a {
height: 30px; padding: 0 12px; border-radius: 999px;
display: inline-flex; align-items: center;
font-size: 12px; font-weight: 650; color: var(--muted);
background: var(--surface); border: 1px solid transparent;
}
.desc-jump a:hover { color: var(--acc); background: var(--acc-soft); }
#pane-desc .desc-sec { scroll-margin-top: 108px; }
#pane-desc .desc-sec {
margin: 0 0 16px; padding: 16px 16px 14px;
border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2);
}
#pane-desc .desc-sec.last { margin-bottom: 4px; }
#pane-desc .desc-sec .sec-h { margin-bottom: 12px; }
#pane-desc .field { margin-bottom: 12px; }
#pane-desc .row, #pane-desc .row3 { margin-bottom: 12px; }
#pane-desc .row > .field, #pane-desc .row3 > .field { margin-bottom: 0; }
#pane-desc .toggles { margin: 4px 0 0; }
#desc-copy textarea { min-height: 140px; }
#desc_whats_new { min-height: 88px; }
#pane-desc .count { float: none; margin-left: 8px; font-size: 11px; }
#pane-desc .count.tight { color: var(--warn); }
.store-mini {
display: flex; align-items: center; gap: 12px;
margin: 0 0 14px; padding: 12px 14px;
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.store-mini-ico {
width: 56px; height: 56px; border-radius: 14px; flex: none;
background: var(--surface); overflow: hidden; position: relative;
display: grid; place-items: center;
}
.store-mini-ico img { width: 100%; height: 100%; object-fit: cover; }
.store-mini-ph { font-size: 11px; font-weight: 800; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
.store-mini-ico:has(img:not(.hidden)) .store-mini-ph { display: none; }
.store-mini-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.store-mini-name { display: flex; align-items: center; gap: 6px; }
.store-mini-name b { font-size: 15px; letter-spacing: -.02em; }
.store-mini-dev {
display: inline-flex; align-items: center; gap: 5px;
color: #01875f; font-size: 12px; font-weight: 550;
}
.store-mini-dev #miniStoreDev { color: inherit; }
.store-mini-txt > span { color: var(--muted); font-size: 12px; font-weight: 550; }
.vbadge {
width: 16px; height: 16px; border-radius: 999px; background: var(--acc); color: #fff;
font-size: 10px; font-weight: 800; display: inline-grid; place-items: center; line-height: 1;
}
.media-item { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.media-lab { font-size: 12px; font-weight: 650; color: var(--muted); }
.media-lab em { font-style: normal; color: var(--faint); font-weight: 600; margin-left: 6px; }
.media-shots { min-width: 0; }
.media-grid { display: grid; grid-template-columns: 132px minmax(200px, 280px) 1fr; gap: 12px; align-items: start; }
.yt-field { margin-top: 14px; }
#pane-desc .drop-icon { width: 132px; height: 132px; min-height: 132px; aspect-ratio: 1 / 1; }
#pane-desc .drop-poster {
width: 100%; min-height: 0; height: auto;
aspect-ratio: 1024 / 500;
}
#pane-desc .drop-add {
width: 88px; min-height: 0; height: 88px; flex: 0 0 88px;
aspect-ratio: 1 / 1;
}
#pane-desc .shotprev img.port { width: 72px; height: 128px; }
#pane-desc .shotprev img.land { width: 128px; height: 72px; }
#pane-desc .shotprev img { width: auto; height: 96px; object-fit: contain; background: var(--surface); }
.spv-toolbar {
display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
margin: 0 0 8px; flex-wrap: wrap; flex: 0 0 auto;
}
.spv-toolbar b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.spv-tpl { display: block; font-size: 11px; color: var(--faint); font-weight: 600; margin-top: 2px; }
.spv-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spv-actions .ghost { height: 28px; padding: 0 10px; font-size: 12px; }
.spv-mode.on { background: var(--acc-soft); color: var(--acc); border-color: transparent; }
.spv-open {
font-size: 12px; font-weight: 650; white-space: nowrap; height: auto; padding: 0 6px;
background: transparent; color: var(--acc);
}
.spv-surface {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
padding: 3px;
margin: 0 0 10px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line);
flex: 0 0 auto;
pointer-events: auto;
}
button.spv-surf,
.spv-surf {
height: 34px;
padding: 0 6px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 650;
letter-spacing: -.01em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
pointer-events: auto;
position: relative;
z-index: 1;
box-shadow: none;
}
button.spv-surf:hover,
.spv-surf:hover {
color: var(--text);
background: rgba(255,255,255,.75);
}
button.spv-surf.on,
.spv-surf.on {
background: var(--surface);
color: var(--acc);
box-shadow: 0 1px 2px rgba(16,24,40,.08), inset 0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent);
}
.spv-surf-lab {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
/* Store preview stage — same soft studio look as push S26 Ultra */
.spv-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
flex: 1 1 auto;
min-height: 0;
width: 100%;
padding: 14px 10px 10px;
border-radius: 18px;
border: 1px solid var(--line);
background:
radial-gradient(65% 50% at 50% 0%, rgba(90, 70, 160, .12), transparent 60%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
overflow: hidden;
box-sizing: border-box;
container-type: size;
}
.store-preview[data-surface="ios"] .spv-stage {
background:
radial-gradient(60% 45% at 50% 0%, rgba(120, 140, 180, .16), transparent 58%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.spv-device-caption {
font-size: 11px;
font-weight: 650;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--faint);
flex: 0 0 auto;
}
.spv-device {
position: relative;
flex: 0 1 auto;
margin: 0 auto;
box-sizing: border-box;
filter: drop-shadow(0 22px 32px rgba(20, 18, 40, .26));
}
.spv-device.phone {
/* Galaxy S26 Ultra body ratio — fill stage height, keep aspect */
--spv-r: 30px;
--spv-screen-r: 24px;
--spv-bezel: 6px;
aspect-ratio: 78.1 / 163.6;
width: min(298px, 100%);
height: auto;
max-width: 100%;
max-height: calc(100% - 28px); /* leave room for caption */
}
.spv-device.phone.os-iphone {
/* iPhone 16 Pro-ish */
--spv-r: 34px;
--spv-screen-r: 28px;
--spv-bezel: 5px;
aspect-ratio: 71.5 / 146.6;
width: min(278px, 100%);
}
@supports (width: 1cqh) {
.spv-device.phone {
height: min(100cqh - 28px, 100%);
width: min(100%, calc((100cqh - 28px) * 78.1 / 163.6));
max-height: none;
}
.spv-device.phone.os-iphone {
height: min(100cqh - 28px, 100%);
width: min(100%, calc((100cqh - 28px) * 71.5 / 146.6));
}
}
.spv-device-shine {
pointer-events: none;
position: absolute; inset: 0; z-index: 5;
border-radius: var(--spv-r, 30px);
background: linear-gradient(118deg, rgba(255,255,255,.28) 0%, transparent 22%, transparent 78%, rgba(255,255,255,.08) 100%);
}
.spv-device-shell {
position: absolute; inset: 0;
border-radius: var(--spv-r, 30px);
background:
linear-gradient(155deg, var(--surface-2) 0%, var(--surface-2) 18%, var(--surface-2) 42%, var(--surface-2) 72%, var(--surface-2) 100%);
padding: 1.5px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(0,0,0,.45),
inset 1px 0 0 rgba(255,255,255,.15),
inset -1px 0 0 rgba(0,0,0,.25);
}
.spv-device.os-iphone .spv-device-shell {
background:
linear-gradient(150deg, var(--surface-2) 0%, var(--surface-2) 22%, var(--surface-2) 55%, var(--surface-2) 100%);
}
.spv-device-bezel {
width: 100%; height: 100%;
border-radius: calc(var(--spv-r, 30px) - 1.5px);
background: var(--surface-2);
padding: var(--spv-bezel, 6px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
box-sizing: border-box;
}
.spv-device-btn {
position: absolute; z-index: 3;
background: linear-gradient(90deg, var(--surface-2), var(--surface-2) 40%, var(--surface-2));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -1px 0 rgba(0,0,0,.4),
1px 0 2px rgba(0,0,0,.25);
}
/* S26 Ultra: volume + power on the right */
.spv-device.os-s26u .spv-btn-silent { display: none; }
.spv-device.os-s26u .spv-btn-vol-up {
right: -2.5px; top: 18%; width: 3px; height: 7%;
border-radius: 0 2px 2px 0;
}
.spv-device.os-s26u .spv-btn-vol-down {
right: -2.5px; top: 26.5%; width: 3px; height: 7%;
border-radius: 0 2px 2px 0;
}
.spv-device.os-s26u .spv-btn-power {
right: -2.5px; top: 38%; width: 3px; height: 10%;
border-radius: 0 2px 2px 0;
}
/* iPhone: silent + volume left, power right */
.spv-device.os-iphone .spv-btn-silent {
left: -2.5px; top: 16%; width: 2.5px; height: 4%;
border-radius: 2px 0 0 2px;
background: linear-gradient(270deg, var(--surface-2), var(--surface-2) 40%, var(--surface-2));
}
.spv-device.os-iphone .spv-btn-vol-up {
left: -2.5px; top: 22%; width: 3px; height: 6.5%;
border-radius: 2px 0 0 2px;
background: linear-gradient(270deg, var(--surface-2), var(--surface-2) 40%, var(--surface-2));
}
.spv-device.os-iphone .spv-btn-vol-down {
left: -2.5px; top: 30%; width: 3px; height: 6.5%;
border-radius: 2px 0 0 2px;
background: linear-gradient(270deg, var(--surface-2), var(--surface-2) 40%, var(--surface-2));
}
.spv-device.os-iphone .spv-btn-power {
right: -2.5px; top: 24%; width: 3px; height: 12%;
border-radius: 0 2px 2px 0;
}
.spv-screen {
position: relative;
width: 100%;
height: 100%;
border-radius: var(--spv-screen-r, 24px);
overflow: hidden;
background: var(--surface-2);
isolation: isolate;
}
.spv-cutout {
position: absolute;
z-index: 4;
pointer-events: none;
}
.spv-device.os-s26u .spv-cutout {
top: 8px; left: 50%; transform: translateX(-50%);
width: 10px; height: 10px; border-radius: 50%;
background: radial-gradient(circle at 40% 35%, var(--surface-2), var(--surface-2) 70%);
box-shadow: 0 0 0 1.5px #1a1a1c;
}
.spv-device.os-iphone .spv-cutout {
top: 10px; left: 50%; transform: translateX(-50%);
width: 92px; height: 28px; border-radius: 18px;
background: var(--surface-2);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.spv-device.os-iphone .spv-cutout::after {
content: "";
position: absolute;
right: 18px; top: 50%; transform: translateY(-50%);
width: 10px; height: 10px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #2a3a55, var(--surface-2) 70%);
box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.spv-home-ind {
display: none;
position: absolute;
z-index: 4;
left: 50%; bottom: 7px;
transform: translateX(-50%);
width: 108px; height: 4px;
border-radius: 99px;
background: rgba(255,255,255,.35);
pointer-events: none;
}
.spv-device.os-iphone .spv-home-ind { display: block; }
.spv-screen iframe {
border: 0; width: 100%; height: 100%; background: var(--surface); display: block;
position: absolute; inset: 0; z-index: 1;
transform-origin: top left;
}
/* Phone: logical mobile viewport scaled to fill the glass */
.spv-device.phone iframe {
inset: auto;
top: 0; left: 0;
width: 390px;
height: 844px;
}
/* Desktop browser frame */
.spv-device.desk {
width: 100%;
max-width: 100%;
aspect-ratio: auto;
max-height: none;
filter: none;
background: var(--surface);
border-radius: 14px;
padding: 8px;
box-shadow: 0 8px 24px rgba(16,24,40,.08);
}
.spv-device.desk .spv-device-shine,
.spv-device.desk .spv-device-btn,
.spv-device.desk .spv-cutout,
.spv-device.desk .spv-home-ind { display: none !important; }
.spv-device.desk .spv-device-shell {
position: relative; inset: auto;
border-radius: 10px;
background: var(--surface-2);
padding: 0;
box-shadow: none;
}
.spv-device.desk .spv-device-bezel {
border-radius: 10px;
background: transparent;
padding: 0;
box-shadow: none;
}
.spv-device.desk .spv-screen {
position: relative;
height: min(520px, calc(100vh - var(--spv-top) - var(--spv-foot) - 140px));
border-radius: 8px;
overflow: hidden;
background: var(--surface);
}
.spv-device.desk iframe {
position: absolute; inset: auto; top: 0; left: 0;
width: 1100px; height: 1490px;
transform: scale(0.347); transform-origin: top left;
}
.spv-device.desk + .spv-device-caption { margin-top: 2px; }
.spv-empty {
position: absolute; inset: 0; z-index: 3;
display: grid; place-items: center;
padding: 24px; text-align: center; color: var(--muted); font-weight: 600;
background: var(--surface-2);
}
.spv-empty.hidden { display: none; }
.spv-hint {
margin: 6px 2px 0;
flex: 0 0 auto;
font-size: 11px;
line-height: 1.35;
}
@media (max-width: 1100px) {
.edit-shell {
grid-template-columns: 1fr;
min-height: 0;
background: var(--surface);
border-radius: 16px;
}
.edit-nav {
position: sticky;
top: 56px;
z-index: 25;
max-height: none;
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 10px 12px;
border-right: 0;
border-bottom: 1px solid var(--line);
border-radius: 16px 16px 0 0;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
scrollbar-width: thin;
contain: none;
}
.edit-nav-group {
display: flex;
align-items: stretch;
gap: 4px;
margin: 0;
flex: 0 0 auto;
padding: 4px;
border: 1px solid rgba(255, 255, 255, .7);
background: rgba(255, 255, 255, .55);
box-shadow: none;
}
.edit-nav-group:last-child { border-right: 1px solid rgba(255, 255, 255, .7); }
.edit-nav-label {
display: none;
}
.edit-nav-item.tab {
width: auto;
min-width: 108px;
margin: 0;
padding: 8px 10px;
align-items: center;
justify-content: flex-start;
}
.edit-nav-txt span { display: none; }
.edit-body { padding: 14px 14px 18px; }
.preview-split { grid-template-columns: 1fr; }
/* Compact phone frame under the form on narrow screens */
.store-preview {
position: static;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface-2);
margin-bottom: 12px;
max-height: none;
}
.store-preview {
height: auto;
max-height: none;
}
.spv-stage {
padding: 12px 8px 10px;
min-height: 420px;
max-height: 520px;
}
.spv-device.phone {
width: min(240px, 72vw);
height: auto;
max-height: 400px;
}
.spv-device.phone.os-iphone { width: min(224px, 68vw); }
.spv-hint { display: none; }
.desc-jump { top: 56px; }
.rev-card { grid-template-columns: 40px 1fr; }
.rev-card-av-wrap { grid-row: 1; width: 40px; }
.rev-card-av { width: 40px; height: 40px; }
.rev-card-tools { grid-column: 2; grid-row: 1; flex-direction: row; justify-content: flex-end; }
.rev-card-main { grid-column: 1 / -1; }
}
@media (hover: none) {
.list-grid .actions, .row-ico { opacity: 1 !important; pointer-events: auto !important; }
}
@media (max-width: 900px) {
.filters { flex-wrap: wrap; }
.list-head { align-items: stretch; }
.list-filters { justify-content: stretch; flex: 1 1 100%; }
.list-filters .lf,
.list-filters .lf-id,
.list-filters .lf-name,
.list-filters .lf-host,
.list-filters .lf-tag {
flex: 1 1 calc(50% - 8px);
max-width: none;
}
.list-filter-reset { width: 100%; }
body.view-list .page { height: auto; min-height: calc(100vh - 56px); padding: 10px 10px 16px; }
body.view-list #view-list { min-height: 70vh; }
.list-card .tbl-wrap { max-height: min(62vh, 640px); }
.list-grid .actions { opacity: 1; pointer-events: auto; }
.row-ico { opacity: 1; }
.row3, .media-grid, .toggles { grid-template-columns: 1fr; }
.metrow, .metrow.verify { grid-template-columns: 1fr; }
.met-row-tools { justify-content: flex-start; padding-bottom: 0; padding-top: 2px; }
.met-key { max-width: none; }
.page { padding: 12px 12px 110px; }
.crm-nav-cluster { gap: 5px; }
.navbtn { padding: 0 7px; gap: 5px; height: 32px; }
.nav-label { font-size: 11.5px; }
.nav-group { gap: 1px; padding: 2px; border-radius: 11px; }
.topnav { gap: 6px; padding: 0 8px 0 6px; height: 58px; }
body:has(> .topnav) { padding-top: 66px; }
body.view-list .page { height: calc(100vh - 58px); }
.addlang { width: 100%; }
.rev-panel-hd { flex-direction: column; }
.rev-summary { justify-content: flex-start; align-items: flex-start; width: 100%; }
.rev-summary-meta { align-items: flex-start; }
#revTransBar .mail-trans-actions {
width: 100%;
margin-left: 0;
flex-wrap: wrap;
}
}
@media (max-width: 680px) {
.row, .revrow, .row-host { grid-template-columns: 1fr; }
}
/* ── Statistics (funnel) ── */
body.view-stats .page { max-width: 100%; }
#view-stats {
display: flex;
flex-direction: column;
gap: 14px;
}
.stats-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
margin: 4px 0 0; padding: 18px 22px;
border-radius: 18px;
background:
radial-gradient(1200px 180px at 8% -40%, rgba(47,107,255,.12), transparent 55%),
radial-gradient(900px 160px at 92% 0%, rgba(18,163,90,.08), transparent 50%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
box-shadow: var(--shadow);
}
.stats-hero-copy h1 {
margin: 4px 0 6px;
font-family: var(--font-display);
font-size: 28px; letter-spacing: -.03em; font-weight: 700;
}
.stats-hero-sub { margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; max-width: 42rem; line-height: 1.45; }
.stats-hero-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.stats-pill {
display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
border-radius: 999px; background: var(--acc-soft); color: var(--acc);
font-size: 12px; font-weight: 650;
}
.stats-filters {
display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end;
padding: 14px 16px; margin-bottom: 0;
border-radius: 16px;
}
.stats-filters-main,
.stats-filters-period,
.stats-filters-actions {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: flex-end;
}
.stats-filters-main { flex: 0 1 auto; }
.stats-filters-period { flex: 0 1 auto; }
.stats-filters-actions {
flex: 0 0 auto;
padding-bottom: 1px;
}
.stats-filters .lf { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 0 0 auto; }
.stats-filters .lf span {
font-size: 10px; color: var(--faint); font-weight: 650;
letter-spacing: .03em; text-transform: uppercase;
line-height: 1.2;
}
.stats-filters .lf input,
.stats-filters .lf select {
height: 30px; border: 1px solid var(--line); border-radius: 8px;
padding: 0 9px; background: var(--surface); font: inherit; font-size: 12px;
color: var(--text); min-width: 96px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.stats-filters .lf input:hover,
.stats-filters .lf select:hover { border-color: var(--line-strong); }
.stats-filters .lf input:focus,
.stats-filters .lf select:focus {
outline: none;
border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
box-shadow: 0 0 0 3px rgba(47, 107, 255, .1);
}
.stats-filters .lf input[type="date"],
.stats-filters .stats-lf-date { min-width: 118px; }
.stats-filters .rcal { align-self: flex-end; }
/* Shared stats / push toolbar */
.stats-toolbar {
--st-ctl-h: 32px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 10px 12px;
padding: 10px 12px;
margin-bottom: 0;
border-radius: 14px;
background: var(--surface);
overflow: visible;
position: relative;
z-index: 5;
}
.stats-toolbar .lf {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
min-width: 0;
flex: 0 0 auto;
position: relative;
}
.stats-toolbar .lf > span {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.stats-toolbar .lf input,
.stats-toolbar .lf select {
height: var(--st-ctl-h);
border: 1px solid var(--line);
border-radius: 8px;
padding: 0 10px;
background: var(--surface);
font: inherit;
font-size: 12.5px;
font-weight: 550;
color: var(--text);
min-width: 104px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.stats-toolbar .lf input:hover,
.stats-toolbar .lf select:hover { border-color: var(--line-strong); }
.stats-toolbar .lf input:focus,
.stats-toolbar .lf select:focus {
outline: none;
border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
box-shadow: 0 0 0 3px rgba(47, 107, 255, .1);
}
.stats-toolbar .lf input[type="date"],
.stats-toolbar .stats-lf-date { min-width: 124px; }
.stats-toolbar .rcal,
.stats-toolbar .date-range.rcal-shell {
align-self: center;
height: var(--st-ctl-h);
min-width: 272px;
width: max-content;
flex: 0 0 auto;
border-radius: 8px;
box-shadow: none;
border-color: var(--line);
padding: 0 8px 0 10px;
}
.stats-toolbar .date-range.rcal-shell .rcal {
min-width: 272px;
width: max-content;
flex: 0 0 auto;
}
.stats-toolbar .date-range.rcal-shell .dr-lab { display: none; }
.stats-toolbar .rcal-field {
flex: 0 0 auto;
min-width: 7.6em;
height: calc(var(--st-ctl-h) - 6px) !important;
font-size: 12.5px !important;
white-space: nowrap;
}
.stats-toolbar .rcal-val {
flex: 0 0 auto;
min-width: 5.6em;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
}
.stats-tb-sep {
flex: 0 0 auto;
align-self: center;
width: 1px;
height: 22px;
margin: 0 2px;
background: var(--surface);
}
.stats-presets,
.ps-presets {
display: inline-flex;
flex-wrap: nowrap;
gap: 4px;
align-items: center;
align-self: center;
min-height: var(--st-ctl-h, 32px);
padding: 0;
flex: 0 0 auto;
}
.stats-toolbar .stats-filters-main,
.stats-toolbar .stats-filters-period,
.stats-toolbar .stats-filters-actions {
display: inline-flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
align-self: center;
flex: 0 1 auto;
min-width: 0;
padding-bottom: 0;
}
.stats-apply,
.stats-reset {
height: var(--st-ctl-h, 32px) !important;
padding: 0 14px !important;
border-radius: 8px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
align-self: center;
flex: 0 0 auto;
box-shadow: none !important;
}
.stats-reset { padding: 0 12px !important; font-weight: 550 !important; }
.st-chip,
#view-stats .st-chip,
#pushStatsPage .st-chip,
#psPresets.ps-presets .st-chip,
.ps-presets .st-chip {
height: 28px !important;
min-width: 0;
padding: 0 10px !important;
border-radius: 7px !important;
border: 1px solid var(--line) !important;
background: var(--surface) !important;
color: var(--muted) !important;
font: inherit !important;
font-weight: 550 !important;
font-size: 12px !important;
cursor: pointer;
box-shadow: none !important;
filter: none !important;
white-space: nowrap;
}
.st-chip:hover,
#view-stats .st-chip:hover,
#pushStatsPage .st-chip:hover,
#psPresets.ps-presets .st-chip:hover,
.ps-presets .st-chip:hover {
color: var(--text) !important;
border-color: var(--line-strong) !important;
background: var(--surface-2) !important;
filter: none !important;
}
.st-chip.on,
#view-stats .st-chip.on,
#pushStatsPage .st-chip.on,
#psPresets.ps-presets .st-chip.on,
.ps-presets .st-chip.on {
background: var(--acc-soft) !important;
border-color: color-mix(in srgb, var(--acc) 30%, var(--line)) !important;
color: var(--acc) !important;
box-shadow: none !important;
filter: none !important;
}
.st-chip.on:hover,
#view-stats .st-chip.on:hover,
#pushStatsPage .st-chip.on:hover,
#psPresets.ps-presets .st-chip.on:hover,
.ps-presets .st-chip.on:hover {
background: var(--surface) !important;
color: var(--acc-hover) !important;
filter: none !important;
}
.stats-kpis {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
margin-bottom: 0;
}
.kpi {
position: relative; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
padding: 14px 16px 15px; box-shadow: var(--shadow);
min-height: 96px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.kpi:hover {
border-color: color-mix(in srgb, var(--kpi-tone, var(--acc)) 22%, var(--line));
box-shadow: 0 1px 2px rgba(15, 20, 25, .04), 0 10px 28px rgba(15, 20, 25, .06);
}
.kpi::before {
content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
border-radius: 999px;
background: var(--kpi-tone, var(--acc));
}
.kpi-label {
font-size: 11px; font-weight: 650; color: var(--faint);
letter-spacing: .02em; text-transform: none;
}
.kpi-val {
margin-top: 8px;
font-family: var(--font-display);
font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
font-variant-numeric: tabular-nums;
}
.kpi-sub { margin-top: 5px; font-size: 12px; color: var(--muted); font-weight: 550; line-height: 1.3; }
.kpi-bar {
margin-top: 12px; height: 3px; border-radius: 999px; background: var(--surface); overflow: hidden;
}
.kpi-bar > i {
display: block; height: 100%; width: var(--w, 0%); border-radius: inherit;
background: var(--kpi-tone, var(--acc));
transition: width .35s ease;
}
.kpi.tone-visit { --kpi-tone: #2f6bff; }
.kpi.tone-uniq { --kpi-tone: #3b82f6; }
.kpi.tone-inst { --kpi-tone: #0ea5e9; }
.kpi.tone-reg { --kpi-tone: #12a35a; }
.kpi.tone-dep { --kpi-tone: #dc6803; }
.kpi.tone-push { --kpi-tone: #0f766e; }
.stats-toolbar .st-group-chain {
align-self: center;
padding-bottom: 0;
flex: 0 1 auto;
min-width: 0;
}
.stats-dim-pills { display: none !important; }
.stats-group-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.stats-table-card {
padding: 0; overflow: hidden; margin-bottom: 0;
border-radius: 16px;
}
.stats-table-card .tblbar,
.stats-tblbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.st-group-chain {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 4px;
min-width: 0;
max-width: 100%;
}
.st-group-sep {
color: var(--faint);
font-size: 13px;
font-weight: 500;
line-height: 1;
user-select: none;
flex-shrink: 0;
padding: 0 1px;
}
.st-group-slot {
--st-chip-h: 32px;
position: relative;
display: inline-flex;
align-items: stretch;
height: var(--st-chip-h);
min-width: 0;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
box-shadow: none;
flex-shrink: 0;
z-index: 1;
transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.st-group-slot:hover { border-color: var(--line-strong); }
.st-group-slot.is-open {
z-index: 40;
border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
box-shadow: 0 0 0 3px rgba(47, 107, 255, .1);
}
.st-group-slot.is-empty,
.st-group-slot.is-add {
color: var(--muted);
border-style: solid;
border-color: var(--line);
background: var(--surface);
}
.st-group-slot.is-empty:hover,
.st-group-slot.is-add:hover {
border-color: color-mix(in srgb, var(--acc) 28%, var(--line-strong));
background: var(--surface);
color: var(--acc);
}
.st-group-slot.is-filled { color: var(--text); background: var(--surface); }
.st-group-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 100%;
margin: 0;
padding: 0 22px 0 10px;
border: 0;
border-radius: 7px;
background: transparent;
font: inherit;
font-size: 12.5px;
font-weight: 550;
color: inherit;
cursor: pointer;
outline: none;
box-shadow: none !important;
filter: none !important;
text-align: left;
min-width: 76px;
}
.st-group-slot.is-filled .st-group-btn {
padding-right: 38px;
font-weight: 650;
min-width: 0;
}
.st-group-slot.is-add .st-group-btn {
font-weight: 550;
min-width: 112px;
padding-left: 10px;
}
.st-group-slot.is-add .st-group-label::before {
content: "+ ";
font-weight: 700;
color: inherit;
opacity: .75;
}
.st-group-btn:focus-visible {
box-shadow: inset 0 0 0 2px rgba(59, 111, 245, .18) !important;
}
.st-group-label {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: -.01em;
}
.st-group-caret {
position: absolute;
right: 8px;
top: 50%;
width: 5px;
height: 5px;
border-right: 1.5px solid var(--line-strong);
border-bottom: 1.5px solid var(--line-strong);
transform: translateY(-60%) rotate(45deg);
pointer-events: none;
opacity: .9;
}
.st-group-slot.is-filled .st-group-caret { right: 26px; }
.st-group-slot.is-open .st-group-caret {
transform: translateY(-30%) rotate(225deg);
border-color: var(--acc);
}
.st-group-clear {
position: absolute;
right: 3px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--faint);
font-size: 15px;
font-weight: 500;
line-height: 1;
cursor: pointer;
padding: 0;
box-shadow: none !important;
filter: none !important;
}
.st-group-clear span { display: block; margin-top: -1px; }
.st-group-clear:hover {
color: var(--text);
background: var(--surface);
filter: none !important;
}
.st-group-menu {
position: absolute;
left: 0;
top: calc(100% + 5px);
min-width: max(100%, 148px);
width: max-content;
padding: 4px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
box-shadow: 0 10px 28px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
z-index: 50;
}
.st-group-opt {
display: flex;
align-items: center;
width: 100%;
min-width: 132px;
height: 30px;
padding: 0 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--text);
font: inherit;
font-size: 12.5px;
font-weight: 550;
text-align: left;
cursor: pointer;
box-shadow: none !important;
filter: none !important;
transition: background .1s ease, color .1s ease;
}
.st-group-opt:hover {
background: var(--surface);
color: var(--text);
filter: none !important;
}
.st-group-opt.is-on {
background: var(--acc-soft);
color: var(--acc);
font-weight: 650;
}
.st-group-opt.is-on::before {
content: "✓";
margin-right: 7px;
font-size: 11px;
font-weight: 700;
width: 12px;
text-align: center;
}
.st-group-opt.is-swap:not(.is-on)::after {
content: "⇄";
margin-left: auto;
padding-left: 10px;
font-size: 11px;
color: var(--faint);
font-weight: 600;
}
.st-group-opt.is-swap:not(.is-on):hover::after { color: var(--acc); }
.st-group-opt-empty {
padding: 8px 10px;
font-size: 12px;
color: var(--muted);
}
.stats-grid th.dim-col,
.stats-grid td.dim-col {
text-align: left;
white-space: nowrap;
font-weight: 650;
}
.stats-grid td.dim-col.is-total { font-weight: 800; }
.stats-tblbar-title {
display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap;
}
.stats-tblbar-title b {
font-family: var(--font-display);
font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
}
.stats-tblbar-title #statsRange,
.stats-tblbar #statsRange {
font-size: 12px; font-weight: 550; color: var(--muted);
}
.stats-tblbar-hint {
font-size: 12px; font-weight: 600;
padding: 4px 10px; border-radius: 999px;
background: var(--surface); color: var(--muted);
}
.stats-wrap {
max-height: min(62vh, 720px); overflow: auto;
scrollbar-gutter: stable;
}
.stats-grid { min-width: 1320px; border-collapse: separate; border-spacing: 0; width: 100%; }
.stats-grid th, .stats-grid td {
padding: 11px 12px; text-align: right; white-space: nowrap;
border-bottom: 1px solid var(--line);
font-variant-numeric: tabular-nums;
font-size: 12.5px;
line-height: 1.25;
vertical-align: middle;
}
.stats-grid th:first-child, .stats-grid td:first-child { text-align: left; }
.stats-grid thead th {
position: sticky; top: 0; z-index: 2;
background: var(--surface); color: var(--muted);
font-size: 11px; font-weight: 650;
letter-spacing: .01em;
text-transform: none !important;
border-bottom: 1px solid var(--line);
}
.stats-grid .sticky-col {
position: sticky; left: 0; z-index: 3;
background: var(--surface); box-shadow: 1px 0 0 var(--line);
}
.stats-grid tbody td { color: var(--text); }
.stats-grid tbody td.sticky-col {
background: var(--surface); z-index: 1; font-weight: 650;
font-variant-numeric: tabular-nums;
}
.stats-grid tbody tr:hover td { background: var(--surface); }
.stats-grid tbody tr:hover td.sticky-col { background: var(--surface); }
/* Override global .pct { display:block } — class is on | , must stay table-cell */
.stats-grid td.pct,
.stats-grid .pct {
display: table-cell;
color: var(--muted);
font-weight: 550;
font-size: 12.5px;
line-height: 1.25;
vertical-align: middle;
padding: 11px 12px;
}
.stats-grid .num-strong { font-weight: 700; color: var(--text); }
.stats-grid .num-ok { color: #0f7a4a; font-weight: 700; }
.stats-grid .num-warn { color: #b54708; font-weight: 700; }
.stats-grid .empty-day { color: var(--faint); }
/* Sticky tfoot + linear-gradient paints gaps/white holes in Chrome — solid only */
.stats-grid tfoot td,
.stats-grid tfoot td.pct,
.stats-grid tfoot td.empty-day,
.stats-grid tfoot td.num-strong,
.stats-grid tfoot td.num-ok,
.stats-grid tfoot td.num-warn {
position: sticky; bottom: 0; z-index: 2;
display: table-cell;
background: var(--surface) !important;
background-image: none !important;
font-weight: 750;
padding: 12px;
line-height: 1.25;
vertical-align: middle;
border-top: 1px solid color-mix(in srgb, var(--acc) 25%, var(--line));
border-bottom: 0;
box-shadow: 0 -1px 0 #eaf0ff, inset 0 1px 0 color-mix(in srgb, var(--acc) 12%, transparent);
}
.stats-grid tfoot td.sticky-col {
background: var(--surface) !important;
z-index: 4; color: var(--acc);
box-shadow: 1px 0 0 color-mix(in srgb, var(--acc) 18%, var(--line)), 0 -1px 0 #eaf0ff;
}
.stats-grid tfoot .empty-day,
.stats-grid tfoot .pct,
.stats-grid tfoot .num-strong,
.stats-grid tfoot .num-ok,
.stats-grid tfoot .num-warn {
background: var(--surface) !important;
background-image: none !important;
}
.stats-empty {
padding: 56px 20px; text-align: center; color: var(--muted); font-weight: 600;
}
@media (max-width: 1280px) {
.stats-toolbar { flex-wrap: wrap; }
}
@media (max-width: 1100px) {
.stats-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-tb-sep { display: none; }
}
@media (max-width: 720px) {
#view-stats { gap: 12px; }
.stats-hero { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
.stats-hero-copy h1 { font-size: 22px; }
.stats-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpi { min-height: 0; padding: 12px 13px; }
.kpi-val { font-size: 22px; }
.stats-filters { padding: 12px; gap: 10px; }
.stats-filters-main,
.stats-filters-period { flex: 1 1 100%; }
.stats-filters .lf,
.stats-toolbar .lf { flex: 1 1 calc(50% - 8px); }
.stats-filters .lf input, .stats-filters .lf select,
.stats-toolbar .lf input, .stats-toolbar .lf select { width: 100%; min-width: 0; }
.stats-filters-actions { width: 100%; }
.stats-apply, .stats-reset { flex: 1 1 auto; }
.stats-toolbar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; align-items: center; }
.stats-toolbar .stats-presets,
.stats-toolbar .ps-presets { flex-wrap: wrap; }
.stats-toolbar .st-group-chain { flex: 1 1 100%; flex-wrap: wrap; }
.stats-toolbar .rcal,
.stats-toolbar .date-range.rcal-shell { min-width: 248px; width: max-content; flex: 0 0 auto; }
#pushStatsPage .ps-toolbar .stats-filters-actions { margin-left: 0; }
#pushStatsPage .ps-toolbar-period { gap: 8px; }
.st-group-slot.is-add .st-group-btn { min-width: 96px; }
}
/* ── Ads Events ── */
body.view-events .page { max-width: 100%; }
.events-hero {
background:
radial-gradient(1100px 180px at 12% -40%, rgba(124,58,237,.12), transparent 55%),
radial-gradient(900px 160px at 90% 0%, rgba(47,107,255,.12), transparent 50%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.events-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ev-warmup { display: inline-flex; align-items: center; gap: 6px; height: 34px; color: var(--muted); font-weight: 600; }
.events-grid { min-width: 1180px; border-collapse: separate; border-spacing: 0; width: 100%; }
.events-grid th, .events-grid td {
padding: 9px 10px; text-align: left; white-space: nowrap;
border-bottom: 1px solid var(--line); vertical-align: top;
}
.events-grid thead th {
position: sticky; top: 0; z-index: 2;
background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 650;
border-bottom: 1px solid var(--line);
}
.events-grid .sticky-col {
position: sticky; left: 0; z-index: 3;
background: var(--surface-2); box-shadow: 1px 0 0 var(--line); font-variant-numeric: tabular-nums;
}
.events-grid tbody td.sticky-col { background: var(--surface); z-index: 1; font-weight: 650; }
.events-grid tbody tr:hover td { background: var(--surface); }
.events-grid tbody tr:hover td.sticky-col { background: var(--surface); }
.events-grid .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 550; }
.ev-sub { color: var(--faint); font-size: 11px; margin-top: 2px; font-weight: 550; }
.ev-clip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ev-log { max-width: 220px; white-space: normal; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ev-badge {
display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: -.01em;
}
.ev-badge.tone-ok { background: var(--ok-bg); color: #0f7a4a; }
.ev-badge.tone-err { background: var(--surface); color: #b42318; }
.ev-badge.tone-warn { background: var(--warn-bg); color: #b54708; }
.ev-badge.tone-mute { background: var(--surface); color: var(--muted); }
@media (max-width: 1100px) {
.events-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.events-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── Namings ── */
#view-links {
--nk-surface: #fff;
--nk-ink: #12151c;
--nk-soft: #f3f5f9;
}
.nk-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
margin-bottom: 18px; flex-wrap: wrap;
}
.nk-head-text { min-width: 0; flex: 1; }
.nk-head-text .crumb { margin-bottom: 4px; }
.nk-head-text h1 {
margin: 0;
font-size: 26px; font-weight: 780; letter-spacing: -.04em;
color: var(--nk-ink);
}
.nk-lead {
margin: 8px 0 0; color: var(--muted); max-width: 540px;
line-height: 1.5; font-size: 13.5px; font-weight: 500;
}
.nk-lead code {
font-size: 12px; padding: 2px 6px; border-radius: 6px;
background: var(--surface); color: var(--text);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
box-shadow: inset 0 0 0 1px #e2e8f0;
}
.nk-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nk-help-btn {
height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 650; font-size: 13px;
}
.nk-guide {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
margin: 0 0 14px; padding: 12px 14px;
background: linear-gradient(135deg, var(--surface) 0%, var(--surface) 55%, var(--surface) 100%);
border: 1px solid var(--line); border-radius: 14px;
}
.nk-guide-flow {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px;
}
.nk-guide-step {
display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #4a5a78;
background: var(--surface); border: 1px solid var(--line);
}
.nk-guide-step.on {
color: var(--acc); border-color: color-mix(in srgb, var(--acc) 28%, var(--line));
background: var(--surface);
}
.nk-guide-arrow { color: var(--faint); font-size: 12px; font-weight: 700; padding: 0 2px; }
.nk-guide-text {
margin: 0; flex: 1 1 220px; font-size: 12.5px; line-height: 1.45; color: var(--muted); font-weight: 500;
}
.nk-guide-text code {
font-size: 11.5px; padding: 1px 5px; border-radius: 5px;
background: var(--surface); color: var(--text);
}
.nk-guide-more { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.nk-block-hd {
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px;
}
.nk-block-hd h3 {
margin: 0; font-size: 11px; font-weight: 760; color: var(--faint);
text-transform: uppercase; letter-spacing: .06em;
}
.nk-add {
display: inline-flex; align-items: center; gap: 7px;
height: 40px; padding: 0 16px 0 14px; border: 0; border-radius: 12px;
background: linear-gradient(180deg, var(--acc) 0%, var(--acc) 100%);
color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer;
box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 16px rgba(47, 107, 255, .28);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nk-add:hover {
filter: brightness(1.03);
box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 20px rgba(47, 107, 255, .34);
transform: translateY(-1px);
}
.nk-add:active { transform: translateY(0); filter: none; }
.nk-add span { font-size: 18px; line-height: 1; font-weight: 500; }
.nk-toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 16px; padding: 10px 12px;
background: var(--nk-surface);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow);
}
.nk-seg {
display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px;
background: var(--nk-soft);
box-shadow: inset 0 1px 2px rgba(16,24,40,.04);
}
.nk-seg button {
height: 32px; padding: 0 12px; border: 0; border-radius: 9px;
background: transparent; color: var(--muted); font-weight: 650; cursor: pointer;
transition: color .12s ease, background .12s ease, box-shadow .12s ease;
}
.nk-seg button:hover { color: var(--text); background: rgba(255,255,255,.7); filter: none; }
.nk-seg button.on:hover { background: var(--surface); color: var(--text); filter: none; }
.nk-seg button.on {
background: var(--surface); color: var(--acc); font-weight: 750;
box-shadow: 0 1px 3px rgba(16,24,40,.08), inset 0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent);
}
.nk-arch {
display: inline-flex; align-items: center; gap: 8px;
height: 34px; padding: 0 12px 0 10px; border-radius: 10px;
color: var(--muted); font-weight: 650; cursor: pointer;
border: 1px solid transparent;
background: transparent;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.nk-arch:hover { background: var(--nk-soft); color: var(--text); }
.nk-arch:has(input:checked) {
background: var(--surface); color: var(--warn);
border-color: #f5d9b8;
}
.nk-arch input {
width: 15px; height: 15px; margin: 0; accent-color: var(--warn); cursor: pointer;
}
.nk-search {
position: relative;
flex: 1 1 220px;
min-width: 200px;
max-width: 420px;
}
.nk-list { display: grid; gap: 12px; }
.nk-card {
position: relative;
display: flex; flex-direction: column; gap: 12px;
background: var(--nk-surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 16px 16px 14px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .03);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
overflow: hidden;
}
.nk-card::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: transparent;
transition: background .18s ease, width .18s ease;
}
.nk-card:hover {
border-color: var(--line-strong);
box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 14px 32px rgba(16, 24, 40, .08);
transform: translateY(-2px);
}
.nk-card:hover::before { background: var(--acc); width: 4px; }
.nk-card.is-glob {
background:
linear-gradient(135deg, color-mix(in srgb, var(--acc-soft) 55%, var(--surface)) 0%, var(--surface) 42%);
}
.nk-card.is-glob::before { background: linear-gradient(180deg, #6b95ff, var(--acc)); width: 4px; }
.nk-card.is-arch {
opacity: .78;
background: var(--surface);
}
.nk-card.is-arch:hover { opacity: 1; }
.nk-card-top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.nk-card-head {
display: flex; flex-direction: column; gap: 8px;
min-width: 0; flex: 1; cursor: pointer;
}
.nk-card-title {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
}
.nk-card-title h3 {
margin: 0; font-size: 15.5px; font-weight: 760; letter-spacing: -.03em;
color: var(--nk-ink); line-height: 1.25;
transition: color .12s ease;
}
.nk-card-head:hover .nk-card-title h3 { color: var(--acc); }
.nk-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.nk-badge {
font-size: 10.5px; font-weight: 720; padding: 3px 8px; border-radius: 999px;
background: var(--surface); color: var(--muted); letter-spacing: .02em;
}
.nk-badge.glob {
color: var(--acc); background: var(--acc-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 20%, transparent);
}
.nk-badge.param {
color: #0e7490; background: var(--surface);
box-shadow: inset 0 0 0 1px #a5f3fc;
}
.nk-badge.first {
color: #b45309; background: var(--surface);
box-shadow: inset 0 0 0 1px #fde68a;
}
.nk-badge.arch {
color: var(--muted); background: var(--surface);
box-shadow: inset 0 0 0 1px #e2e8f0;
}
.nk-card-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
font-size: 12px; color: var(--muted); min-width: 0;
}
.nk-dot {
width: 3px; height: 3px; border-radius: 50%; background: var(--surface-2); flex: 0 0 auto;
}
.nk-stat {
display: inline-flex; align-items: center; gap: 4px;
height: 24px; padding: 0 8px;
border-radius: 7px; background: var(--surface);
color: var(--faint); font-weight: 600; font-size: 11.5px;
}
.nk-stat em {
font-style: normal; font-weight: 780; color: var(--text); font-variant-numeric: tabular-nums;
}
.nk-key {
font-size: 11.5px; color: var(--text); padding: 4px 9px; border-radius: 8px;
background: var(--surface);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
border: 1px solid var(--line);
letter-spacing: -.01em;
}
.nk-geos { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nk-geo {
font-size: 10.5px; font-weight: 760; padding: 3px 7px; border-radius: 6px;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
color: var(--acc-hover); letter-spacing: .05em;
border: 1px solid #d4e0ff;
}
.nk-geo.muted {
color: var(--faint); font-weight: 600; background: transparent; padding: 0;
letter-spacing: 0; border: 0;
}
.nk-card-link {
display: flex; align-items: center; gap: 8px; min-width: 0;
padding: 7px 7px 7px 12px;
border-radius: 12px;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border: 1px solid var(--line);
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.nk-card:hover .nk-card-link {
border-color: var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.nk-link-ico {
display: inline-flex; flex: 0 0 auto; color: var(--muted);
}
.nk-link-ico svg { width: 14px; height: 14px; }
.nk-card-link code {
flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding: 0; background: transparent; border: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
transition: color .12s ease;
}
.nk-card-link code:hover { color: var(--acc); }
.nk-card-actions {
display: flex; flex-direction: row; flex-wrap: wrap; gap: 3px;
align-items: center; flex: 0 0 auto;
padding: 3px;
border-radius: 11px;
background: var(--nk-soft);
border: 1px solid var(--line);
}
.nk-ico {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 9px; cursor: pointer;
background: transparent; color: var(--muted); font-size: 12px; font-weight: 650;
white-space: nowrap; transition: color .12s ease, background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.nk-ico svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nk-ico:hover {
color: var(--text); background: var(--surface);
box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
transform: translateY(-1px);
}
.nk-ico.on { color: #d97706; }
.nk-ico.on:hover { color: #b45309; background: var(--surface); }
.nk-ico-txt { padding: 0 10px; }
.nk-copy {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
color: var(--acc); font-size: 12px; font-weight: 740;
border: 1px solid #c7d6f8; white-space: nowrap; flex: 0 0 auto;
box-shadow: 0 1px 2px rgba(47, 107, 255, .08);
transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.nk-copy svg { width: 14px; height: 14px; }
.nk-copy:hover {
background: var(--acc);
color: #fff;
border-color: var(--acc);
box-shadow: 0 4px 12px rgba(47, 107, 255, .28);
transform: translateY(-1px);
}
.nk-copy:active { transform: translateY(0); }
.nk-mini {
font-size: 10px; font-weight: 700; letter-spacing: .03em;
color: var(--muted); padding: 1px 5px; border-radius: 4px; background: var(--surface);
}
.nk-empty {
text-align: center; padding: 52px 24px; color: var(--muted);
border: 1px dashed var(--line); border-radius: 16px;
background:
radial-gradient(ellipse 60% 80% at 50% 0%, color-mix(in srgb, var(--acc-soft) 70%, transparent), transparent 70%),
var(--surface);
}
.nk-empty b { display: block; color: var(--nk-ink); font-size: 16px; margin-bottom: 6px; letter-spacing: -.02em; }
.nk-empty p { margin: 0 auto; max-width: 360px; line-height: 1.45; }
.nk-empty button { margin-top: 16px; }
.nk-pwa-links {
margin-top: 18px; padding: 0; overflow: hidden;
border-radius: 14px;
}
.nk-pwa-links summary {
cursor: pointer; font-weight: 680; color: var(--muted); list-style: none;
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
padding: 14px 16px;
transition: color .12s ease, background .12s ease;
}
.nk-pwa-links summary:hover { color: var(--text); background: var(--surface-2); }
.nk-pwa-links summary::-webkit-details-marker { display: none; }
.nk-pwa-links-hint {
font-size: 12px; font-weight: 550; color: var(--faint);
}
.nk-pwa-links[open] summary {
border-bottom: 1px solid var(--line); color: var(--text);
}
/* Naming edit page */
#view-naming { max-width: 100%; padding-bottom: 24px; }
.nk-page-hd {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
margin-bottom: 16px; flex-wrap: wrap;
}
.nk-page-hd-text { min-width: 0; flex: 1; }
.nk-crumb-back {
display: inline-flex; align-items: center; gap: 4px;
height: auto; padding: 0; margin: 0 0 6px; border: 0; background: transparent;
color: var(--faint); font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.nk-crumb-back:hover { color: var(--acc); background: transparent; }
.nk-page-hd-text h1 {
margin: 0; font-size: 24px; font-weight: 780; letter-spacing: -.035em; color: var(--text);
}
.nk-page-key {
margin: 6px 0 0; display: inline-flex; align-items: center;
height: 24px; padding: 0 9px; border-radius: 7px;
font-size: 12px; font-weight: 650; color: var(--text);
background: var(--surface); border: 1px solid var(--line);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nk-page-key:empty { display: none; }
.nk-page-hd-actions {
display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.nk-save-top, .nk-save-ft {
height: 38px; padding: 0 16px; border-radius: 11px; font-weight: 740;
box-shadow: 0 4px 12px rgba(47, 107, 255, .22);
}
.nk-page-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
gap: 16px;
align-items: start;
}
.nk-page-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nk-page-side { min-width: 0; }
.nk-side-card {
position: sticky; top: 68px;
padding: 14px 14px 12px;
}
.nk-sec {
padding: 16px 16px 14px;
display: flex; flex-direction: column; gap: 2px;
}
.nk-sec-title {
margin: 0 0 12px; font-size: 11px; font-weight: 760; color: var(--faint);
text-transform: uppercase; letter-spacing: .06em;
}
.nk-sec-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.nk-field-lab-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-bottom: 6px;
}
.nk-field-lab-row label { margin: 0; }
.nk-field-params .hint { margin-top: 6px; }
.nk-closing-wrap {
display: flex; gap: 8px; align-items: stretch;
}
.nk-closing-wrap input { flex: 1; min-width: 0; }
.nk-closing-wrap .nk-keitaro-tpl {
flex: 0 0 auto; height: 34px; margin: 0; padding: 0 12px;
font-size: 12px; font-weight: 700; color: var(--acc);
border-color: #c7d6f8; background: var(--acc-soft);
}
.nk-closing-wrap .nk-keitaro-tpl:hover {
background: var(--acc); color: #fff; border-color: var(--acc);
}
.nk-page-ft {
display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 16px; padding: 12px 0 0; border-top: 1px solid var(--line);
position: sticky; bottom: 0; background: linear-gradient(180deg, transparent, var(--bg) 28%);
padding-bottom: 8px; z-index: 5;
}
.nk-block { padding: 0; border: 0; background: transparent; }
.nk-block > h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.nk-cfg-btn {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
height: 44px; padding: 0 14px; border-radius: 11px; cursor: pointer;
border: 1px solid #c7d6f8; background: linear-gradient(180deg, var(--surface), var(--surface));
color: var(--acc); font-weight: 740; font-size: 13.5px;
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.nk-cfg-btn:hover {
border-color: #9db4ff; box-shadow: 0 4px 14px rgba(47, 107, 255, .12);
transform: translateY(-1px); background: var(--surface);
}
.nk-cfg-btn-meta { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.nk-global-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0 2px; font-weight: 650; color: var(--text); margin-top: 4px;
border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 12px;
}
.nk-global-row em {
display: block; font-style: normal; font-size: 11.5px; font-weight: 550; color: var(--faint); margin-top: 2px;
}
.nk-clone-btn {
height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line);
background: var(--surface); color: var(--muted); font-weight: 650; cursor: pointer;
}
.nk-clone-btn:hover { color: var(--text); border-color: var(--line-strong); }
.nk-launch { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.nk-launch-card {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 11px; border-radius: 12px; border: 1px solid var(--line);
background: var(--surface-2);
transition: border-color .12s ease, background .12s ease;
}
.nk-launch-card:hover { border-color: var(--line-strong); background: var(--surface); }
.nk-lc-hd {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nk-lc-label {
font-weight: 760; font-size: 12px; color: #1e3a5f; letter-spacing: -.01em;
}
.nk-lc-copy {
display: inline-flex; align-items: center; gap: 4px;
height: 26px; padding: 0 8px; border-radius: 7px; cursor: pointer;
border: 1px solid var(--line); background: var(--surface); color: var(--acc);
font-size: 11.5px; font-weight: 720;
}
.nk-lc-copy svg { width: 13px; height: 13px; }
.nk-lc-copy:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.nk-launch-card .nk-lc-desc {
margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--faint); font-weight: 500;
}
.nk-launch-card code {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
color: var(--text); font-size: 11.5px; padding: 7px 9px; border-radius: 8px;
background: var(--surface); border: 1px solid var(--line);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nk-launch-tip {
margin: 4px 0 0; padding: 10px 12px; border-radius: 10px;
background: var(--surface); border: 1px solid #d4e0ff; color: #2f4570;
font-size: 12px; line-height: 1.45;
display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.nk-launch-tip code {
font-size: 11px; padding: 1px 5px; border-radius: 4px;
background: var(--surface); color: #1e3a8a; border: 0; display: inline;
white-space: normal;
}
.nk-launch-tip .link { font-weight: 720; }
.nk-launch-tip-row { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 2px; }
.nk-lc-actions { display: inline-flex; align-items: center; gap: 6px; }
.nk-lc-cfg {
height: 26px; padding: 0 8px; border-radius: 7px; cursor: pointer;
border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted);
font-size: 11.5px; font-weight: 700;
}
.nk-lc-cfg:hover { color: var(--acc); border-color: #b7c9ff; background: var(--acc-soft); filter: none; }
/* Tail builder modal */
.nk-tail-card { width: min(760px, 100%); max-height: min(94vh, 880px); }
.nk-tail-body { display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.nk-tail-presets {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
button.nk-tail-preset,
.nk-tail-preset {
appearance: none !important;
display: flex !important; flex-direction: column !important; align-items: flex-start !important;
gap: 2px !important; text-align: left !important;
height: auto !important; min-height: 0 !important;
padding: 10px 12px !important; margin: 0 !important;
border: 1px solid var(--line) !important; border-radius: 12px !important;
background: var(--surface-2) !important; color: inherit !important;
font: inherit !important; cursor: pointer; box-shadow: none !important;
}
button.nk-tail-preset:hover,
.nk-tail-preset:hover {
border-color: #b7c9ff !important; background: var(--surface) !important; filter: none;
}
.nk-tail-preset b { font-size: 13px; font-weight: 750; color: var(--text); letter-spacing: -.02em; }
.nk-tail-preset span { font-size: 11.5px; color: var(--faint); font-weight: 500; line-height: 1.35; }
.nk-tail-how {
padding: 12px 14px; border-radius: 12px;
background: linear-gradient(180deg, var(--surface), var(--surface));
border: 1px solid var(--line);
}
.nk-tail-how b { display: block; font-size: 12.5px; font-weight: 750; color: #1e3a5f; margin-bottom: 6px; }
.nk-tail-how ol {
margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.nk-tail-how code {
font-size: 11px; padding: 1px 5px; border-radius: 4px;
background: var(--surface); color: #1e3a8a;
}
.nk-tail-rows { display: flex; flex-direction: column; gap: 8px; }
.nk-tail-row {
display: grid; grid-template-columns: 118px minmax(190px, auto) 1fr; gap: 12px; align-items: center;
padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
position: relative;
}
.nk-tail-row.is-custom {
grid-template-columns: 118px minmax(190px, auto) 1fr 28px;
padding-right: 8px;
}
.nk-tail-k { min-width: 0; }
.nk-tail-k b {
display: block; font-size: 13px; font-weight: 750; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--text);
}
.nk-tail-k span { display: block; margin-top: 2px; font-size: 11px; color: var(--faint); line-height: 1.3; }
.nk-tail-k-custom .nk-tail-key-inp {
width: 100% !important; height: 28px !important;
padding: 0 8px !important; margin: 0 !important;
border: 1px solid var(--line) !important; border-radius: 7px !important;
background: var(--surface-2) !important; color: var(--text) !important;
font: inherit !important; font-size: 12.5px !important; font-weight: 700 !important;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
box-shadow: none !important;
}
.nk-tail-k-custom .nk-tail-key-inp:focus {
border-color: #9db4ff !important;
box-shadow: 0 0 0 3px rgba(47, 107, 255, .1) !important;
outline: none; background: var(--surface) !important;
}
button.nk-tail-del,
.nk-tail-del {
appearance: none !important;
width: 28px !important; height: 28px !important; min-height: 0 !important;
padding: 0 !important; margin: 0 !important;
border: 0 !important; border-radius: 7px !important;
background: transparent !important; color: var(--faint) !important;
font: inherit !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1 !important;
cursor: pointer; box-shadow: none !important;
}
button.nk-tail-del:hover,
.nk-tail-del:hover {
color: #b42318 !important; background: var(--surface) !important; filter: none;
}
/* Add-param control: plain ghost button — never a labeled-divider / line-through-text. */
.nk-tail-addbar {
display: block;
margin: 2px 0 4px;
padding: 0;
border: 0;
background: transparent;
}
.nk-tail-addbar::before,
.nk-tail-addbar::after {
content: none !important;
display: none !important;
}
button.ghost.nk-tail-addbtn,
button.nk-tail-addbtn,
.nk-tail-addbtn {
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: none !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 14px !important;
margin: 0 !important;
border: 1px solid var(--line) !important;
border-radius: 11px !important;
background: var(--surface) !important;
color: var(--muted) !important;
font: inherit !important;
font-size: 13px !important;
font-weight: 650 !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: none !important;
white-space: nowrap;
position: relative;
z-index: 1;
}
button.ghost.nk-tail-addbtn::before,
button.ghost.nk-tail-addbtn::after,
button.nk-tail-addbtn::before,
button.nk-tail-addbtn::after {
content: none !important;
display: none !important;
}
button.ghost.nk-tail-addbtn:hover,
button.nk-tail-addbtn:hover,
.nk-tail-addbtn:hover {
color: var(--acc) !important;
border-color: #b9c9ff !important;
background: var(--acc-soft) !important;
filter: none !important;
text-decoration: none !important;
}
.nk-tail-seg {
display: inline-flex; align-items: stretch; gap: 0;
padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
}
button.nk-tail-seg-btn,
.nk-tail-seg-btn {
appearance: none !important;
height: 28px !important; min-height: 0 !important;
padding: 0 10px !important; margin: 0 !important;
border: 0 !important; border-radius: 8px !important;
background: transparent !important; color: var(--muted) !important;
font: inherit !important; font-size: 11.5px !important; font-weight: 700 !important;
cursor: pointer; box-shadow: none !important; white-space: nowrap;
}
button.nk-tail-seg-btn:hover,
.nk-tail-seg-btn:hover { color: var(--text) !important; filter: none; }
button.nk-tail-seg-btn.on,
.nk-tail-seg-btn.on {
background: var(--surface) !important; color: var(--acc) !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}
.nk-tail-val { min-width: 0; position: relative; }
.nk-tail-text {
width: 100% !important; height: 36px !important;
padding: 0 11px !important; border: 1px solid var(--line-strong) !important;
border-radius: 9px !important; background: var(--surface-2) !important;
font: inherit !important; font-size: 12.5px !important; color: var(--text) !important;
box-shadow: none !important;
}
.nk-tail-text:focus {
border-color: #9db4ff !important;
box-shadow: 0 0 0 3px rgba(47, 107, 255, .12) !important;
outline: none; background: var(--surface) !important;
}
.nk-tail-off { font-size: 12px; color: var(--faint); font-weight: 500; }
.nk-tail-macro-wrap { position: relative; }
button.nk-tail-macro-btn,
.nk-tail-macro-btn {
appearance: none !important;
width: 100% !important; height: 36px !important;
display: inline-flex !important; align-items: center !important; justify-content: space-between !important;
gap: 8px !important; padding: 0 10px 0 11px !important; margin: 0 !important;
border: 1px solid var(--line-strong) !important; border-radius: 9px !important;
background: var(--surface) !important; color: var(--text) !important;
font: inherit !important; font-size: 12.5px !important; font-weight: 600 !important;
cursor: pointer; box-shadow: none !important; text-align: left !important;
}
button.nk-tail-macro-btn:hover,
.nk-tail-macro-btn:hover,
.nk-tail-macro-wrap.open .nk-tail-macro-btn {
border-color: #b7c9ff !important; background: var(--surface) !important; filter: none;
}
.nk-tail-macro-lab {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nk-tail-chev { flex: 0 0 auto; color: var(--faint); transition: transform .15s ease; }
.nk-tail-macro-wrap.open .nk-tail-chev { transform: rotate(180deg); color: var(--acc); }
.nk-tail-pop {
display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
max-height: 240px; overflow: auto;
padding: 6px; border: 1px solid var(--line); border-radius: 12px;
background: var(--surface);
box-shadow: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 8px rgba(16, 24, 40, .06);
}
.nk-tail-macro-wrap.open .nk-tail-pop { display: block; }
.nk-tail-pop-sec {
padding: 6px 8px 4px;
font-size: 10px; font-weight: 750; letter-spacing: .06em;
text-transform: uppercase; color: var(--faint);
}
button.nk-tail-pop-opt,
.nk-tail-pop-opt {
appearance: none !important;
width: 100% !important; height: auto !important; min-height: 0 !important;
display: flex !important; flex-direction: column !important; align-items: flex-start !important;
gap: 2px !important; padding: 8px 9px !important; margin: 0 0 2px !important;
border: 0 !important; border-radius: 8px !important;
background: transparent !important; color: inherit !important;
font: inherit !important; text-align: left !important; cursor: pointer;
box-shadow: none !important;
}
button.nk-tail-pop-opt:hover,
.nk-tail-pop-opt:hover { background: var(--surface) !important; filter: none; }
button.nk-tail-pop-opt.on,
.nk-tail-pop-opt.on { background: var(--acc-soft) !important; }
.nk-tail-pop-opt b {
font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
}
.nk-tail-pop-opt.on b { color: var(--acc); }
.nk-tail-pop-opt code {
font-size: 10.5px; color: var(--faint); font-weight: 500;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nk-tail-preview {
padding: 14px 14px 12px; border-radius: 14px;
border: 1px solid var(--line);
background:
radial-gradient(420px 120px at 0% 0%, rgba(47, 107, 255, .08), transparent 60%),
var(--surface);
}
.nk-tail-prev-hd {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 10px;
}
.nk-tail-prev-title {
display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap;
}
.nk-tail-prev-title > span {
font-size: 11px; font-weight: 750; letter-spacing: .05em;
text-transform: uppercase; color: var(--muted);
}
.nk-tail-key {
font-size: 11px; font-weight: 700; color: var(--acc);
background: var(--surface); border: 1px solid var(--line);
padding: 3px 8px; border-radius: 999px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
button.nk-tail-prev-copy,
.nk-tail-prev-copy {
appearance: none !important;
height: 32px !important; padding: 0 11px !important; margin: 0 !important;
display: inline-flex !important; align-items: center !important; gap: 6px !important;
border: 1px solid #c5d4ff !important; border-radius: 9px !important;
background: var(--surface) !important; color: var(--acc) !important;
font: inherit !important; font-size: 12px !important; font-weight: 700 !important;
cursor: pointer; box-shadow: none !important; flex: 0 0 auto;
}
button.nk-tail-prev-copy:hover,
.nk-tail-prev-copy:hover {
background: var(--acc) !important; color: #fff !important; border-color: var(--acc) !important;
filter: none;
}
.nk-tail-prev-base {
font-size: 12.5px; font-weight: 650; color: #1e3a5f; line-height: 1.4;
word-break: break-all;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
padding: 8px 10px; margin-bottom: 8px;
background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.nk-tail-prev-qs {
display: flex; flex-wrap: wrap; gap: 6px;
}
.nk-tail-chip {
display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%;
padding: 5px 8px; border-radius: 8px;
background: var(--surface); border: 1px solid var(--line);
font-size: 11.5px; line-height: 1.25;
}
.nk-tail-chip em {
font-style: normal; font-weight: 750; color: var(--acc);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nk-tail-chip b {
font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
}
.nk-tail-chip.muted { color: var(--faint); font-weight: 550; border-style: dashed; }
.nk-tail-prev-url.hidden { display: none !important; }
.nk-tail-ft { gap: 8px; }
@media (max-width: 720px) {
.nk-tail-presets { grid-template-columns: 1fr; }
.nk-tail-row,
.nk-tail-row.is-custom { grid-template-columns: 1fr; gap: 8px; }
.nk-tail-seg { width: 100%; }
.nk-tail-seg-btn { flex: 1; }
.nk-tail-del { position: absolute; top: 8px; right: 8px; }
}
/* Track help modal */
.nk-track-card { width: min(720px, 100%); max-height: min(92vh, 780px); }
.nk-track-card > .nk-modal-hd {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border-bottom: 1px solid var(--line);
}
.nk-track-tabs {
display: flex; gap: 4px; padding: 8px 14px 0; overflow-x: auto;
border-bottom: 1px solid var(--line); background: var(--surface);
scrollbar-width: none;
}
.nk-track-tabs::-webkit-scrollbar { display: none; }
.nk-track-tabs button {
flex: 0 0 auto; height: 34px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent;
background: transparent; color: var(--muted); font-weight: 650; font-size: 13px; cursor: pointer;
margin-bottom: -1px; border-radius: 8px 8px 0 0;
}
.nk-track-tabs button:hover { color: var(--text); background: rgba(255,255,255,.7); filter: none; }
.nk-track-tabs button.on:hover { filter: none; }
.nk-track-tabs button.on {
color: var(--acc); border-bottom-color: var(--acc); font-weight: 750;
background: var(--surface);
}
.nk-track-body { padding-top: 14px; }
.nk-track-pane { display: none; }
.nk-track-pane.on { display: block; }
.nk-track-flow {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px;
}
.nk-tf {
display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; border-radius: 12px;
background: var(--surface); border: 1px solid var(--line); text-align: center; min-width: 0;
box-shadow: 0 1px 2px rgba(15,20,25,.04);
}
.nk-tf-ico {
width: 30px; height: 30px; margin: 0 auto 4px; border-radius: 9px;
display: grid; place-items: center;
background: linear-gradient(145deg, var(--surface), var(--surface)); color: var(--acc);
}
.nk-tf-ico svg { display: block; }
.nk-tf > span:not(.nk-tf-ico) { font-size: 12px; font-weight: 750; color: #1e3a5f; }
.nk-tf small { font-size: 10.5px; color: var(--faint); font-weight: 550; line-height: 1.3; }
.nk-track-gloss { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.nk-track-gloss > div {
display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start;
padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
box-shadow: 0 1px 1px rgba(15,20,25,.03);
}
.nk-track-gloss dt { margin: 0; font-size: 12px; font-weight: 750; color: #1e3a5f; }
.nk-track-gloss dd { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nk-track-gloss code, .nk-track-steps code, .nk-track-lead code, .nk-track-bullets code, .nk-tt-row code {
font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: var(--surface); color: var(--text);
}
.nk-track-steps { margin: 0; padding: 0; list-style: none; counter-reset: th; display: flex; flex-direction: column; gap: 12px; }
.nk-track-steps li {
position: relative; padding: 12px 12px 12px 44px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--line);
}
.nk-track-steps li::before {
counter-increment: th; content: counter(th);
position: absolute; left: 12px; top: 12px;
width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center; font-size: 12px; font-weight: 800;
background: var(--acc); color: #fff;
}
.nk-track-steps b { display: block; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.nk-track-steps p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nk-track-ex {
display: block; padding: 8px 10px; border-radius: 8px; overflow-x: auto;
font-size: 11.5px; line-height: 1.4; color: #1e3a5f;
background: var(--surface); border: 1px solid var(--line); white-space: nowrap;
}
.nk-track-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); font-weight: 500; }
.nk-track-table { display: flex; flex-direction: column; gap: 0; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.nk-tt-row {
display: grid; grid-template-columns: minmax(120px, .9fr) 1.4fr; gap: 10px;
padding: 10px 12px; font-size: 12.5px; line-height: 1.4; color: var(--text);
border-top: 1px solid var(--line); background: var(--surface);
}
.nk-tt-row:first-child { border-top: 0; }
.nk-tt-row.hd { background: var(--surface); font-weight: 720; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }
.nk-tt-row em { font-style: normal; font-weight: 750; color: var(--muted); }
.nk-tt-row em.ok { color: #067647; }
.nk-track-pane[data-th-pane="pixels"] .nk-tt-row { grid-template-columns: .7fr 1.2fr .9fr; }
.nk-track-bullets { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text); }
.nk-track-bullets li { margin: 6px 0; }
@media (max-width: 640px) {
.nk-track-flow { grid-template-columns: 1fr 1fr; }
.nk-track-gloss > div { grid-template-columns: 1fr; gap: 2px; }
.nk-lc-copy span { display: none; }
.nk-lc-copy { padding: 0; width: 28px; justify-content: center; }
.nk-head-actions { width: 100%; justify-content: stretch; }
.nk-help-btn, .nk-add { flex: 1; justify-content: center; }
.nk-tt-row, .nk-track-pane[data-th-pane="pixels"] .nk-tt-row { grid-template-columns: 1fr; gap: 4px; }
}
.nk-nparams { display: flex; flex-direction: column; gap: 6px; }
.nk-nparams-empty {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
width: 100%; margin: 0; padding: 14px 14px; border-radius: 10px; cursor: pointer;
border: 1.5px dashed var(--line-strong); background: var(--surface-2); text-align: left;
color: var(--muted); font-weight: 650; font-size: 13px;
}
.nk-nparams-empty em {
font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--faint);
}
.nk-nparams-empty:hover {
border-color: #9db4ff; background: var(--acc-soft); color: var(--acc);
}
.nk-nparam { display: grid; grid-template-columns: 1fr 1fr 28px; gap: 6px; align-items: center; }
.nk-nparam input {
height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px;
font-size: 12.5px; background: var(--surface-2);
}
.nk-nparam input:focus {
outline: none; background: var(--surface); border-color: #b8caf5;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 12%, transparent);
}
.nk-nparam-add { font-size: 12.5px; font-weight: 700; }
.nk-linked ul { margin: 6px 0 0; padding-left: 16px; color: var(--muted); }
.nk-linked li { margin: 3px 0; }
/* URL modal */
.nk-modal {
position: fixed; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center;
padding: 20px 12px;
}
.nk-modal.hidden { display: none !important; }
.nk-modal-backdrop {
position: absolute; inset: 0;
background: rgba(12, 18, 32, .42);
backdrop-filter: blur(2px);
}
.nk-modal-card {
position: relative; width: min(920px, 100%); max-height: min(90vh, 860px);
background: var(--surface); border-radius: 16px; border: 1px solid rgba(16,24,40,.08);
display: flex; flex-direction: column;
box-shadow: 0 24px 64px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06);
overflow: hidden;
}
.nk-modal-hd {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 16px 18px 14px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.nk-modal-hd-text { min-width: 0; flex: 1; }
.nk-modal-hd h2 {
margin: 0; font-size: 17px; font-weight: 760; letter-spacing: -.025em; color: var(--text);
}
.nk-modal-lead {
margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); font-weight: 500;
max-width: 560px;
}
.nk-modal-body {
flex: 1; overflow: auto; padding: 14px 16px 16px;
background: var(--surface);
}
.nk-modal-ft {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--line);
background: var(--surface);
}
.nk-modal-save {
min-width: 110px; height: 36px; padding: 0 16px; border-radius: 10px;
font-weight: 700; box-shadow: 0 4px 12px rgba(47, 107, 255, .22);
}
.nk-urls { display: flex; flex-direction: column; gap: 10px; }
.nk-urls-empty {
padding: 36px 20px; text-align: center; color: var(--muted);
border: 1px dashed var(--line); border-radius: 14px; background: var(--surface-2);
}
.nk-urls-empty b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.nk-urls-empty p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--faint); }
.nk-url {
padding: 0; border: 1px solid var(--line); border-radius: 14px;
background: var(--surface);
box-shadow: 0 1px 2px rgba(16,24,40,.03);
overflow: visible;
}
.nk-url-hd {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 58px 32px;
gap: 8px; align-items: start;
padding: 12px 12px 10px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.nk-url-n {
width: 28px; height: 28px; margin-top: 4px;
display: grid; place-items: center;
font-size: 12px; font-weight: 780; color: var(--acc);
background: var(--acc-soft); border-radius: 8px;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent);
}
.nk-url-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nk-url-input {
width: 100%; min-width: 0; height: 36px;
border: 1px solid var(--line); border-radius: 10px; padding: 0 12px;
font-size: 13px; background: var(--surface-2); color: var(--text);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.nk-url-input:hover { background: var(--surface); border-color: var(--line-strong); }
.nk-url-input:focus {
outline: none; background: var(--surface); border-color: #b8caf5;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent);
}
.nk-w-wrap {
display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0;
align-items: stretch;
}
.nk-w-lab {
font-size: 10px; font-weight: 700; color: var(--faint); line-height: 1;
text-align: center; letter-spacing: .04em; text-transform: uppercase;
}
.nk-url .nk-w {
width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 10px;
text-align: center; font-size: 13px; font-weight: 700; color: var(--text);
padding: 0; background: var(--surface-2); font-variant-numeric: tabular-nums;
transition: border-color .12s ease, box-shadow .12s ease;
}
.nk-url .nk-w:focus {
outline: none; border-color: #b8caf5; background: var(--surface);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent);
}
.nk-x {
width: 28px; height: 28px; border: 0; border-radius: 8px; cursor: pointer;
background: transparent; color: var(--faint); font-size: 17px; line-height: 1;
transition: background .12s ease, color .12s ease;
}
.nk-x:hover { background: var(--surface); color: #dc2626; }
.nk-url-del { margin-top: 18px; width: 32px; height: 32px; }
.nk-click-warn {
margin: 0; padding: 6px 10px; border-radius: 8px;
font-size: 11.5px; color: #9a3412; font-weight: 550; line-height: 1.35;
background: var(--surface); border: 1px solid #fed7aa;
}
.nk-click-warn code {
font-size: 11px; padding: 1px 5px; border-radius: 4px;
background: #ffedd5; color: #9a3412; font-weight: 700;
}
.nk-click-warn.hidden { display: none !important; }
.nk-url-meta {
margin: 0; padding: 12px;
display: flex; flex-direction: column; gap: 10px;
}
.nk-meta-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
}
.nk-meta-lab {
flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--faint);
letter-spacing: .03em; text-transform: uppercase; min-width: 72px;
}
.nk-plats { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.nk-plat {
position: relative;
display: inline-flex; align-items: center; gap: 0; height: 30px; padding: 0 12px;
border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
font-size: 12px; font-weight: 650; color: var(--muted); background: var(--surface);
user-select: none;
transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.nk-plat input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nk-plat::before { display: none; }
.nk-plat:hover { border-color: var(--line-strong); color: var(--text); }
.nk-plat.on, .nk-plat:has(input:checked) {
color: var(--acc); background: var(--acc-soft); border-color: #9db4ff;
font-weight: 740;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 10%, transparent);
}
.nk-geo-pair {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.nk-geo-lab {
display: flex; flex-direction: column; gap: 5px; min-width: 0;
font-size: 11px; font-weight: 700; color: var(--faint);
letter-spacing: .02em;
}
.nk-geo-lab em {
font-style: normal; font-weight: 600; color: var(--faint); text-transform: none; letter-spacing: 0;
}
.nk-ms {
display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
min-height: 38px; padding: 5px 8px; border-radius: 10px;
background: var(--surface-2); border: 1px solid var(--line); position: relative;
transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.nk-ms:hover { background: var(--surface); border-color: var(--line-strong); }
.nk-ms:focus-within {
background: var(--surface); border-color: #b8caf5;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 12%, transparent);
}
.nk-tag {
display: inline-flex; align-items: center; gap: 4px;
height: 24px; padding: 0 4px 0 8px; border: 0; border-radius: 6px; cursor: pointer;
background: var(--surface); color: #2f4a7a; font-size: 11px; font-weight: 740;
}
.nk-tag:hover { background: var(--surface); }
.nk-tag-code { letter-spacing: .02em; }
.nk-tag-x {
display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1;
}
.nk-tag:hover .nk-tag-x { color: var(--text); background: rgba(16,24,40,.06); }
.nk-ms-q {
flex: 1 1 auto !important;
min-width: 96px !important;
width: auto !important;
height: 24px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: var(--text) !important;
padding: 0 2px !important;
}
.nk-ms-menu {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
max-height: 220px; overflow: auto; background: var(--surface);
border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 10px 28px rgba(16,24,40,.12);
padding: 4px;
}
.nk-ms-hint, .nk-ms-empty {
padding: 8px 10px; font-size: 11px; font-weight: 550; color: var(--faint);
}
.nk-ms-menu .nk-ms-opt,
.nk-ms-menu button.nk-ms-opt {
display: flex; align-items: center; justify-content: flex-start; gap: 10px;
width: 100%; height: auto; min-height: 34px; margin: 0; padding: 7px 10px;
border: 0; border-radius: 7px; background: transparent; color: var(--text);
text-align: left; cursor: pointer; font-size: 12.5px; font-weight: 500;
}
.nk-ms-menu .nk-ms-opt:hover,
.nk-ms-menu button.nk-ms-opt:hover { background: var(--surface); }
.nk-ms-code {
flex: 0 0 34px; font-weight: 750; font-size: 11px; color: var(--muted);
font-variant-numeric: tabular-nums; letter-spacing: .03em;
}
.nk-ms-name { flex: 1; min-width: 0; color: var(--text); font-weight: 550; }
.nk-url-params {
border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px;
}
.nk-url-params summary {
cursor: pointer; font-size: 12px; font-weight: 680; color: var(--muted);
display: flex; align-items: center; gap: 8px; list-style: none;
min-height: 28px;
}
.nk-url-params summary::-webkit-details-marker { display: none; }
.nk-url-params summary:hover { color: var(--text); }
.nk-param-add {
margin-left: auto; width: 26px; height: 26px; padding: 0;
border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
background: var(--acc-soft); color: var(--acc); font-size: 16px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.nk-param-add:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.nk-params-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nk-params-empty {
margin: 0; font-size: 12px; color: var(--faint); font-weight: 500;
}
.nk-param { display: grid; grid-template-columns: 1fr 1fr 28px; gap: 6px; align-items: center; }
.nk-param input {
height: 32px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px;
font-size: 12.5px; background: var(--surface-2);
}
.nk-param input:focus {
outline: none; background: var(--surface); border-color: #b8caf5;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 12%, transparent);
}
.nk-add-link {
width: 100%; height: 40px; margin: 10px 0 0; border-radius: 12px; cursor: pointer;
border: 1.5px dashed var(--line-strong); background: var(--surface-2); color: var(--muted);
font-weight: 700; font-size: 13px; gap: 6px;
transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.nk-add-link span { font-size: 16px; font-weight: 500; line-height: 1; }
.nk-add-link:hover {
color: var(--acc); background: var(--acc-soft); border-color: #9db4ff;
}
.nk-hint-line {
margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); font-weight: 500;
}
.nk-macros {
margin-top: 12px; border: 1px solid #d6e4ff; border-radius: 12px;
background: var(--surface); overflow: hidden;
}
.nk-macros > summary {
cursor: pointer; font-size: 13px; font-weight: 720; color: var(--text);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
list-style: none; padding: 10px 12px; min-height: 44px;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.nk-macros > summary::-webkit-details-marker { display: none; }
.nk-macros > summary:hover { background: var(--surface); }
.nk-macros-title { font-weight: 760; letter-spacing: -.01em; }
.nk-macros-hint { font-size: 11.5px; font-weight: 550; color: var(--faint); }
.nk-macros > summary input {
margin-left: auto; height: 30px; width: min(200px, 100%);
border: 1px solid var(--line); border-radius: 8px; padding: 0 10px;
font-size: 12px; background: var(--surface);
}
.nk-macros > summary input:focus {
outline: none; border-color: #9db4ff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent);
}
.nk-macros[open] > summary { border-bottom: 1px solid var(--line); }
.nk-macro-grid {
display: flex; flex-wrap: wrap; gap: 8px;
padding: 12px 12px 14px; max-height: none; overflow: visible;
}
.nk-macro {
height: auto; min-height: 28px; padding: 5px 10px; border-radius: 8px; cursor: pointer;
border: 1px solid #9ec0ff; background: var(--surface); color: var(--acc-hover);
font-size: 12px; font-weight: 650; line-height: 1.2;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
box-shadow: none;
transition: background .1s ease, border-color .1s ease, color .1s ease, transform .1s ease;
}
.nk-macro:hover {
background: #d6e6ff; border-color: #6b9eff; color: #1e40af;
transform: translateY(-1px);
}
.nk-macro:active { transform: translateY(0); }
@media (max-width: 720px) {
.nk-head-text h1 { font-size: 22px; }
.nk-toolbar { padding: 8px; gap: 8px; }
.nk-search { min-width: 100%; order: 3; }
.nk-card { padding: 14px; border-radius: 14px; }
.nk-card-top { flex-wrap: wrap; gap: 10px; }
.nk-card-actions { width: 100%; justify-content: flex-start; }
.nk-ico-txt span { display: none; }
.nk-copy span { display: none; }
.nk-copy { padding: 0; width: 32px; justify-content: center; }
.nk-dot { display: none; }
.nk-page-grid { grid-template-columns: 1fr; gap: 12px; }
.nk-page-hd-text h1 { font-size: 20px; }
.nk-page-hd-actions { width: 100%; }
.nk-page-hd-actions .nk-save-top { flex: 1; }
.nk-side-card { position: static; }
.nk-sec-row { grid-template-columns: 1fr; }
.nk-closing-wrap { flex-direction: column; }
.nk-page-ft { flex-direction: column-reverse; align-items: stretch; }
.nk-page-ft .nk-save-ft { width: 100%; }
.nk-geo-pair { grid-template-columns: 1fr; }
.nk-url-hd {
grid-template-columns: 28px minmax(0, 1fr) 32px;
grid-template-areas:
"n url del"
"n w del";
}
.nk-url-n { grid-area: n; }
.nk-url-main { grid-area: url; }
.nk-w-wrap { grid-area: w; flex-direction: row; align-items: center; gap: 8px; }
.nk-w-lab { text-align: left; }
.nk-url .nk-w { width: 64px; }
.nk-url-del { grid-area: del; margin-top: 4px; }
.nk-meta-lab { min-width: 0; width: 100%; }
.nk-macros > summary input { width: 100%; margin-left: 0; order: 3; }
}
/* ── Track Key ── */
.tk-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
margin: 0 0 18px; flex-wrap: wrap;
}
.tk-head-text { min-width: 0; flex: 1; }
.tk-head-text h1 {
margin: 0; font-size: 26px; font-weight: 780; letter-spacing: -.03em; line-height: 1.15;
}
.tk-lead { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; max-width: 560px; }
.tk-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tk-add {
height: 38px; padding: 0 14px; border-radius: 11px; border: 0; cursor: pointer;
background: var(--acc); color: #fff; font-weight: 700; font-size: 13px;
display: inline-flex; align-items: center; gap: 6px;
}
.tk-add:hover { background: var(--acc-hover); }
.tk-filter { padding: 14px 16px; margin-bottom: 14px; }
.tk-filter-grid {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(160px, .8fr) auto;
gap: 12px; align-items: end;
}
.tk-filter-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 1px; }
.tk-type-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tk-chip {
height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 650; cursor: pointer;
}
.tk-chip.on, .tk-chip:hover { border-color: #c5d4ff; color: var(--acc); background: var(--acc-soft); }
.tk-board { padding: 0; overflow: hidden; }
.tk-board-hd {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; color: var(--muted);
}
.tk-pager { display: flex; align-items: center; gap: 8px; }
.tk-pager .ghost { height: 30px; min-width: 34px; padding: 0 8px; }
.tk-list { min-height: 120px; }
.tk-table-wrap { overflow: auto; }
.tk-table-wrap.tight { max-height: 280px; border: 1px solid var(--line); border-radius: 12px; }
.tk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tk-table th {
text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--muted);
letter-spacing: .02em; text-transform: uppercase; background: var(--surface-2); border-bottom: 1px solid var(--line);
white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.tk-table td {
padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.tk-table tr:last-child td { border-bottom: 0; }
.tk-table tr:hover td { background: var(--surface); }
.tk-name {
border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700;
color: var(--text); cursor: pointer; text-align: left;
}
.tk-name:hover { color: var(--acc); }
.tk-type {
display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
background: var(--surface); color: var(--acc); white-space: nowrap;
}
.tk-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer;
}
.tk-mono.muted { color: var(--faint); cursor: default; }
.tk-user { color: var(--muted); font-weight: 550; white-space: nowrap; }
.tk-row-actions { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.tk-row-actions .ico.danger { color: #b42318; }
.tk-empty {
padding: 40px 24px; text-align: center; color: var(--muted);
}
.tk-empty.tight { padding: 20px; }
.tk-empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }
.tk-empty p { margin: 0 auto 14px; max-width: 420px; line-height: 1.45; }
.tk-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tk-modal-card { width: min(520px, 100%); }
.tk-bulk-card { width: min(720px, 100%); }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.modal-ft {
display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 12px;
border-top: 1px solid var(--line);
}
.tk-bulk-help {
font-size: 12px; color: var(--muted); line-height: 1.5;
background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.tk-bulk-help code {
display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 6px;
background: var(--surface); border: 1px solid var(--line); font-size: 11px;
}
.tk-bulk-types { margin-top: 6px; font-size: 11px; color: var(--faint); }
.tk-bulk-preview { display: flex; flex-direction: column; gap: 10px; }
.tk-bulk-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-pill {
display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px;
font-size: 11px; font-weight: 700;
}
.tk-pill.ok { background: #d1fadf; color: #067647; }
.tk-pill.bad { background: var(--surface); color: #b42318; }
.tk-bulk-errors {
font-size: 12px; color: #b54708; background: var(--warn-bg); border: 1px solid #f7b27a;
border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
max-height: 160px; overflow: auto;
}
.tk-bulk-errors code { color: var(--muted); font-size: 11px; }
.tk-pick-card { width: min(520px, 100%); }
.tk-pick-list {
display: flex; flex-direction: column; gap: 8px;
max-height: min(420px, 58vh); overflow: auto;
margin: 4px -2px 0; padding: 2px;
}
button.tk-pick-row,
.tk-pick-row {
appearance: none;
height: auto; min-height: 0;
width: 100%;
display: flex; align-items: center; gap: 12px;
padding: 12px 12px 12px 12px;
border-radius: 14px;
border: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
color: var(--text);
text-align: left;
font: inherit; font-weight: 550;
box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
cursor: pointer;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
button.tk-pick-row:hover,
.tk-pick-row:hover {
border-color: #b9c9ff;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
color: var(--text);
box-shadow: 0 6px 16px rgba(47, 107, 255, .08);
transform: translateY(-1px);
}
button.tk-pick-row:active,
.tk-pick-row:active { transform: translateY(0); }
.tk-pick-ico {
flex: none;
width: 36px; height: 36px; border-radius: 11px;
display: grid; place-items: center;
background: linear-gradient(160deg, var(--surface) 0%, var(--surface) 100%);
color: var(--acc);
border: 1px solid color-mix(in srgb, var(--acc) 18%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.tk-pick-ico svg { display: block; }
.tk-pick-main {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 4px;
align-items: flex-start;
}
.tk-pick-main b {
display: block;
font-size: 13.5px; font-weight: 700;
letter-spacing: -.02em; line-height: 1.25;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.tk-pick-sub {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
min-width: 0; max-width: 100%;
}
.tk-pick-type {
display: inline-flex; align-items: center;
height: 20px; padding: 0 7px; border-radius: 999px;
background: var(--acc-soft); color: var(--acc);
font-style: normal; font-size: 10.5px; font-weight: 750;
letter-spacing: .01em;
}
.tk-pick-sub code {
font-size: 11px; font-weight: 650;
color: var(--text); background: var(--surface);
padding: 2px 7px; border-radius: 7px;
font-family: ui-monospace, Menlo, Consolas, monospace;
}
.tk-pick-tok {
font-size: 11px; font-weight: 550; color: var(--faint);
font-family: ui-monospace, Menlo, Consolas, monospace;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 160px;
}
.tk-pick-tok.is-empty { font-family: inherit; font-style: italic; }
.tk-pick-go {
flex: none;
width: 22px; height: 22px;
display: grid; place-items: center;
color: var(--faint); font-size: 18px; line-height: 1;
transition: color .15s ease, transform .15s ease;
}
button.tk-pick-row:hover .tk-pick-go,
.tk-pick-row:hover .tk-pick-go {
color: var(--acc);
transform: translateX(2px);
}
.tk-pick-meta { font-size: 11px; color: var(--faint); font-family: ui-monospace, Menlo, Consolas, monospace; }
.met-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.met-add-row .met-add { margin-top: 0; }
@media (max-width: 900px) {
.tk-filter-grid { grid-template-columns: 1fr; }
.tk-filter-actions { width: 100%; }
.tk-filter-actions button { flex: 1; }
.tk-head-actions { width: 100%; }
.tk-head-actions button { flex: 1; }
.tk-table th:nth-child(5), .tk-table td:nth-child(5) { display: none; }
}
@media (max-width: 720px) {
.tk-table th:nth-child(2), .tk-table td:nth-child(2),
.tk-table th:nth-child(4), .tk-table td:nth-child(4) { display: none; }
.tk-head-text h1 { font-size: 22px; }
}
/* ── Domains inventory page ── */
.dm-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
margin: 0 0 16px; flex-wrap: wrap;
}
.dm-head-text { min-width: 0; flex: 1; }
.dm-head-text h1 {
margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -.03em;
}
.dm-lead { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; max-width: 640px; }
.dm-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dm-add {
height: 38px; padding: 0 14px; border: 0; border-radius: 11px;
background: var(--acc); color: #fff; font: inherit; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
box-shadow: 0 1px 2px rgba(47, 107, 255, .25);
}
.dm-add:hover { background: var(--acc-hover); }
.dm-kpis {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
margin: 0 0 14px;
}
.dm-kpi {
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
box-shadow: var(--shadow);
}
.dm-kpi b { font-size: 22px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.dm-kpi span { font-size: 12px; font-weight: 700; color: var(--text); }
.dm-kpi em { font-style: normal; font-size: 11px; color: var(--faint); font-weight: 500; }
.dm-kpi.tone-free b { color: var(--acc); }
.dm-kpi.tone-ok b { color: var(--ok); }
.dm-filter { padding: 14px 16px; margin-bottom: 14px; }
.dm-filter-grid {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(140px, .7fr) auto;
gap: 12px; align-items: end;
}
.dm-filter-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 1px; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dm-chip {
height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 650;
cursor: pointer;
}
.dm-chip.on, .dm-chip:hover { border-color: #c5d4ff; color: var(--acc); background: var(--acc-soft); }
.dm-board { padding: 0; overflow: hidden; }
.dm-board-hd {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700;
}
.dm-list { min-height: 140px; }
.dm-table-wrap { overflow-x: auto; overflow-y: visible; }
.dm-table {
width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0;
table-layout: fixed; font-size: 13px;
}
.dm-table th {
text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700;
color: var(--faint); text-transform: uppercase; letter-spacing: .04em;
border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap;
}
.dm-table td {
padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.dm-table tr:last-child td { border-bottom: 0; }
.dm-table tr:hover td { background: var(--surface); }
.dm-table th:nth-child(1), .dm-table td:nth-child(1) { width: 26%; }
.dm-table th:nth-child(2), .dm-table td:nth-child(2) { width: 108px; }
.dm-table th:nth-child(3), .dm-table td:nth-child(3) { width: 118px; }
.dm-table th:nth-child(4), .dm-table td:nth-child(4) { width: 18%; }
.dm-table th:nth-child(5), .dm-table td:nth-child(5) { width: 96px; }
.dm-table th:nth-child(6),
.dm-table td:nth-child(6) { width: 248px; }
.dm-table td.dm-actions {
vertical-align: middle;
width: 248px;
}
.dm-table .dm-host-cell { min-width: 0; max-width: none; }
.dm-table .dm-host {
border: 0; background: transparent; padding: 0;
font: inherit; font-family: inherit; font-weight: 650; font-size: 13px;
color: var(--text); cursor: pointer; letter-spacing: -.01em;
text-align: left; display: block; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-table .dm-host:hover { color: var(--acc); }
.dm-table .dm-err {
margin-top: 3px; font-size: 11px; color: #b54708; line-height: 1.3;
max-width: 100%;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden; cursor: help;
}
.dm-table .dm-pill {
display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px;
font-size: 11px; font-weight: 700; white-space: nowrap;
}
.dm-table .dm-pill.tone-ok { background: #d1fadf; color: #067647; }
.dm-table .dm-pill.tone-warn { background: #feefc6; color: #b54708; }
.dm-table .dm-pill.tone-info { background: var(--acc-soft); color: var(--acc); }
.dm-table .dm-pill.tone-mute { background: var(--surface); color: var(--muted); }
.dm-table .dm-pwa {
border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer;
display: flex; flex-direction: column; gap: 1px; font: inherit; color: var(--text);
min-width: 0; max-width: 100%;
}
.dm-table .dm-pwa:hover b { color: var(--acc); }
.dm-table .dm-pwa b {
font-size: 13px; font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.dm-table .dm-pwa .mono {
font-size: 11px; color: var(--faint);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.dm-table .dm-free-tag { font-size: 12px; color: var(--faint); font-weight: 550; }
.dm-table .dm-owner {
color: var(--muted); font-weight: 550; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.dm-table .dm-actions-inner {
display: grid;
grid-template-columns: 110px 30px 30px 30px;
gap: 6px;
align-items: center;
justify-content: end;
margin-left: auto;
width: max-content;
max-width: 100%;
box-sizing: border-box;
}
.dm-table .dm-actions .dm-act,
.dm-table .dm-actions .dm-act.primary {
width: 110px; height: 30px; padding: 0 8px; font-size: 12px; font-weight: 700;
border-radius: 9px; border: 0; background: var(--acc); color: #fff; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: inline-flex; align-items: center; justify-content: center;
box-sizing: border-box;
}
.dm-table .dm-actions .dm-act.primary:hover { background: var(--acc-hover); }
.dm-table .dm-actions .ico,
.dm-table .dm-actions a.ico {
width: 30px; height: 30px; border-radius: 9px;
border: 1px solid var(--line); background: var(--surface); color: var(--text);
display: inline-flex; align-items: center; justify-content: center;
box-sizing: border-box; text-decoration: none; padding: 0;
}
.dm-table .dm-actions .dm-ico-ph {
width: 30px; height: 30px; display: block; visibility: hidden; pointer-events: none;
}
.dm-table .dm-actions .ico.danger { color: #b42318; }
.dm-table .dm-actions .ico.danger:hover { background: var(--surface); border-color: #fecdca; }
.dm-empty {
padding: 48px 24px; text-align: center; color: var(--muted); font-weight: 550;
}
.dm-empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }
.dm-empty p { margin: 0 auto 16px; max-width: 420px; line-height: 1.45; }
@media (max-width: 1000px) {
.dm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-filter-grid { grid-template-columns: 1fr; }
.dm-filter-actions { width: 100%; }
.dm-filter-actions button { flex: 1; }
.dm-table th:nth-child(5), .dm-table td:nth-child(5) { display: none; }
.dm-table { min-width: 760px; }
.dm-table th:nth-child(6), .dm-table td:nth-child(6) { width: 228px; }
}
@media (max-width: 720px) {
.dm-head-actions { width: 100%; }
.dm-head-actions button { flex: 1; }
.dm-table th:nth-child(3), .dm-table td:nth-child(3),
.dm-table th:nth-child(4), .dm-table td:nth-child(4) { display: none; }
.dm-table { min-width: 520px; }
.dm-head-text h1 { font-size: 22px; }
}
.dm-empty.tight { padding: 20px; }
.dm-attach-card { width: min(480px, 100%); }
.dm-attach-list {
display: flex; flex-direction: column; gap: 6px;
max-height: 360px; overflow: auto; margin: 10px 0 4px;
}
.dm-attach-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px;
border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit;
}
.dm-attach-row:hover { border-color: #c5d4ff; background: var(--surface); }
.dm-attach-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-attach-main b { font-size: 13px; }
.dm-attach-main code { font-size: 11px; color: var(--muted); }
.dm-attach-meta { font-size: 11px; color: var(--faint); font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
/* ── Push hub + per-PWA pane ── */
.push-hero .stats-hero-sub { max-width: 42rem; }
.push-filters .grow { flex: 1 1 220px; min-width: 160px; }
.push-hub-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.push-hub-grid { min-width: 980px; }
.push-hub-grid td.sticky-col { min-width: 220px; }
.push-pwa {
display: flex; align-items: center; gap: 10px; min-width: 0;
}
.push-pwa img {
width: 36px; height: 36px; border-radius: 10px; object-fit: cover;
background: var(--surface); flex: none; border: 1px solid var(--line);
}
.push-pwa b { display: block; font-size: 13px; line-height: 1.25; }
.push-pwa span { display: block; font-size: 11px; color: var(--faint); font-weight: 550; }
.push-hub-actions { display: flex; gap: 6px; justify-content: flex-end; }
.push-hub-actions .ghost {
height: 30px; padding: 0 10px; font-size: 12px; font-weight: 650;
}
#pane-push .hint-card { margin: 4px 0 14px; }
#pane-push .hint-hd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
#pane-push textarea {
width: 100%; resize: vertical; min-height: 78px;
border: 1px solid var(--line); border-radius: 12px;
padding: 10px 12px; font: inherit; background: var(--surface); color: var(--text);
}
#pane-push textarea:focus {
outline: none; border-color: color-mix(in srgb, var(--acc) 55%, var(--line));
box-shadow: 0 0 0 3px var(--acc-soft);
}
.push-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 0 0 14px;
}
.push-kpis .kpi { min-height: 78px; padding: 12px 14px; }
.push-kpis .kpi-val { font-size: 22px; }
.push-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
gap: 14px;
align-items: start;
}
.push-col { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.push-send-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.push-result {
margin-top: 12px; padding: 10px 12px; border-radius: 12px;
border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600;
}
.push-result.ok { background: var(--ok-bg); border-color: #abefc6; color: var(--ok); }
.push-result.err { background: var(--surface); border-color: #fecdca; color: #b42318; }
.push-result.warn { background: var(--warn-bg); border-color: #fecdca; color: #b54708; }
/* Galaxy S26 Ultra · One UI push preview (lock + shade) */
.push-preview-sec { overflow: visible; }
.push-preview-sec .met-sec-hd {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.push-mode-switch {
display: inline-flex; padding: 3px;
border-radius: 10px; background: var(--surface);
border: 1px solid var(--line); flex: none;
}
.push-mode-btn {
appearance: none; border: 0; cursor: pointer;
padding: 7px 12px; border-radius: 8px;
font: inherit; font-size: 12px; font-weight: 650;
color: var(--muted); background: transparent;
transition: .15s ease;
}
.push-mode-btn:hover { color: var(--text); }
.push-mode-btn.is-on {
background: var(--surface); color: var(--text);
box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.push-device-wrap {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
gap: 10px;
padding: 18px 0 12px;
background:
radial-gradient(65% 50% at 50% 0%, rgba(90, 70, 160, .12), transparent 60%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border-radius: 16px;
border: 1px solid var(--line);
transition: background .25s ease;
}
.push-device-wrap.is-shade {
background:
radial-gradient(70% 55% at 50% 0%, rgba(40, 80, 140, .18), transparent 60%),
linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 100%);
border-color: var(--line-strong);
}
.push-device-wrap.is-shade .push-device-caption { color: var(--muted); }
.push-device-caption {
font-size: 11px; font-weight: 650; letter-spacing: .04em;
text-transform: uppercase; color: var(--faint);
}
.push-device {
/* Body 163.6 × 78.1 mm (GSMArena) → W/H = 78.1/163.6 */
--pd-w: 298px;
--pd-r: 30px;
--pd-screen-r: 24px;
--pd-bezel: 6px;
--pd-font: Roboto, "Noto Sans", "Segoe UI", system-ui, sans-serif;
position: relative;
width: var(--pd-w);
aspect-ratio: 78.1 / 163.6;
height: auto;
filter: drop-shadow(0 28px 40px rgba(20, 18, 40, .3));
}
.push-device-shine {
pointer-events: none;
position: absolute; inset: 0; z-index: 5; border-radius: var(--pd-r);
background: linear-gradient(118deg, rgba(255,255,255,.28) 0%, transparent 22%, transparent 78%, rgba(255,255,255,.08) 100%);
}
/* Titanium / Armor Aluminum chassis */
.push-device-shell {
position: absolute; inset: 0;
border-radius: var(--pd-r);
background:
linear-gradient(155deg, var(--surface-2) 0%, var(--surface-2) 18%, var(--surface-2) 42%, var(--surface-2) 72%, var(--surface-2) 100%);
padding: 1.5px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(0,0,0,.45),
inset 1px 0 0 rgba(255,255,255,.15),
inset -1px 0 0 rgba(0,0,0,.25);
}
.push-device-bezel {
width: 100%; height: 100%;
border-radius: calc(var(--pd-r) - 1.5px);
background: var(--surface-2);
padding: var(--pd-bezel);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.push-device-screen {
position: relative;
width: 100%; height: 100%;
border-radius: var(--pd-screen-r);
overflow: hidden;
background: var(--surface-2);
}
.push-device-btn {
position: absolute; z-index: 3;
background: linear-gradient(90deg, var(--surface-2), var(--surface-2) 40%, var(--surface-2));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -1px 0 rgba(0,0,0,.4),
1px 0 2px rgba(0,0,0,.25);
}
/* S26 Ultra: volume + power all on the right */
.push-device-btn-vol-up {
right: -2.5px; top: 118px; width: 3px; height: 38px;
border-radius: 0 2px 2px 0;
}
.push-device-btn-vol-down {
right: -2.5px; top: 164px; width: 3px; height: 38px;
border-radius: 0 2px 2px 0;
}
.push-device-btn-power {
right: -2.5px; top: 228px; width: 3px; height: 52px;
border-radius: 0 2px 2px 0;
}
/* Light One UI wallpaper (lock) / dark blurred (shade) */
.push-wallpaper {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 55% 40% at 75% 20%, rgba(200, 170, 140, .55), transparent 60%),
radial-gradient(ellipse 50% 45% at 20% 70%, rgba(180, 200, 210, .45), transparent 55%),
linear-gradient(165deg, var(--surface-2) 0%, var(--surface-2) 45%, var(--surface-2) 100%);
transition: background .25s ease, filter .25s ease;
}
.push-device[data-mode="shade"] .push-wallpaper {
background:
radial-gradient(ellipse 70% 50% at 30% 20%, var(--acc) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 80% 70%, #1a3048 0%, transparent 50%),
linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 100%);
filter: blur(0px);
}
.push-device[data-mode="shade"] .push-wallpaper::after {
content: "";
position: absolute; inset: 0;
background: rgba(8, 10, 14, .55);
backdrop-filter: blur(2px);
}
.push-punch {
position: absolute; z-index: 3;
top: 8px; left: 50%; transform: translateX(-50%);
width: 10px; height: 10px; border-radius: 50%;
background: radial-gradient(circle at 40% 35%, var(--surface-2), var(--surface-2) 70%);
box-shadow: 0 0 0 1.5px #1a1a1c;
}
.push-lock,
.push-shade {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column;
padding: 0 0 8px;
font-family: var(--pd-font);
pointer-events: none;
}
.push-lock .push-toast,
.push-shade .push-toast { pointer-events: auto; cursor: pointer; }
.push-lock { color: var(--text); }
.push-shade { color: #f2f2f7; display: none; }
.push-device[data-mode="lock"] .push-lock { display: flex; }
.push-device[data-mode="lock"] .push-shade { display: none; }
.push-device[data-mode="shade"] .push-lock { display: none; }
.push-device[data-mode="shade"] .push-shade { display: flex; }
.push-char {
float: right; font-size: 11px; font-weight: 650;
color: var(--faint); font-variant-numeric: tabular-nums;
}
.push-char.is-warn { color: #b54708; }
.push-char.is-over { color: #b42318; }
.push-fit-hint {
margin: 8px 0 0; font-size: 12px; line-height: 1.4;
color: var(--faint); font-weight: 450;
}
.push-fit-hint b { color: var(--muted); font-weight: 650; }
.push-status {
display: flex; align-items: center; justify-content: space-between;
min-height: 26px;
padding: 9px 14px 0;
font-size: 11px; font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.push-status-icons {
display: flex; align-items: center; gap: 3px;
color: var(--text);
}
.push-batt-pct {
font-size: 10px; font-weight: 600;
margin-right: 1px;
font-variant-numeric: tabular-nums;
}
.push-batt {
width: 20px; height: 10px; border-radius: 2px;
border: 1.15px solid rgba(26,26,30,.9); padding: 1px; position: relative;
}
.push-batt::after {
content: ""; position: absolute; right: -2.8px; top: 2.4px;
width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(26,26,30,.9);
}
.push-batt > i {
display: block; width: 78%; height: 100%; border-radius: .5px;
background: var(--surface-2);
}
.push-lock-glyph {
display: flex; justify-content: center;
margin-top: 4px;
color: rgba(26,26,30,.55);
}
/* One UI stacked clock: HH / MM */
.push-lock-clock {
display: flex; flex-direction: column;
align-items: center;
margin: 8px 0 14px;
padding: 0 16px;
text-align: center;
}
.push-lock-clock b {
display: block;
font-size: 72px; font-weight: 300;
letter-spacing: -.06em; line-height: .88;
font-family: var(--pd-font);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.push-lock-date {
margin-top: 8px;
font-size: 13px; font-weight: 400;
color: rgba(26,26,30,.72);
letter-spacing: .01em;
text-transform: capitalize;
}
/* One UI Cards — frosted light glass (S26 Ultra lock screen) */
.push-toast {
display: flex; gap: 11px; align-items: flex-start;
margin: 0 18px;
padding: 12px 8px 12px 12px;
border-radius: 26px;
background: rgba(255, 255, 255, .82);
border: 0;
box-shadow: 0 2px 14px rgba(40, 40, 50, .08);
color: var(--text);
backdrop-filter: blur(40px) saturate(1.5);
-webkit-backdrop-filter: blur(40px) saturate(1.5);
animation: pushToastIn .4s cubic-bezier(.2,.8,.2,1) both;
transition: padding .2s ease, box-shadow .2s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.push-toast:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@keyframes pushToastIn {
from { opacity: 0; transform: translateY(-8px) scale(.98); }
to { opacity: 1; transform: none; }
}
.push-toast-ico {
width: 30px; height: 30px;
border-radius: 50%;
object-fit: cover; flex: none;
margin-top: 2px;
background: var(--surface-2);
}
.push-toast-main {
min-width: 0; flex: 1;
display: flex; flex-direction: column; gap: 2px;
padding: 1px 0;
}
.push-toast-top {
display: flex; align-items: baseline; gap: 8px;
}
.push-toast-app {
flex: 1; min-width: 0;
font-size: 12px; font-weight: 600;
color: var(--text);
letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.push-toast-when {
flex: none;
font-size: 11px; font-weight: 400;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Android: title always 1 line; body 1 line collapsed / multi expanded */
.push-toast-title {
display: block;
font-size: 13px; font-weight: 700;
color: var(--text);
letter-spacing: -.01em;
line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.push-toast-body {
font-size: 12.5px; font-weight: 400;
color: var(--text); line-height: 1.3;
white-space: pre-wrap; word-break: break-word;
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; overflow: hidden;
transition: none;
}
.push-toast.is-expanded .push-toast-body {
-webkit-line-clamp: 8;
}
.push-toast-chev {
flex: none;
width: 16px; height: 16px;
color: var(--faint);
opacity: .85;
margin-top: 4px;
transition: transform .2s ease;
}
.push-toast.is-expanded .push-toast-chev {
transform: rotate(180deg);
}
.push-fp {
display: flex; justify-content: center;
margin: 18px auto 0;
color: rgba(26,26,30,.35);
}
.push-lock-foot {
margin-top: auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 28px 10px;
}
.push-shortcut {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.55);
color: var(--text);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* —— Notification shade (dark One UI panel) —— */
.push-status-light,
.push-status-light .push-status-icons { color: #f2f2f7; }
.push-status-light .push-batt {
border-color: rgba(242,242,247,.92);
}
.push-status-light .push-batt::after { background: rgba(242,242,247,.92); }
.push-status-light .push-batt > i { background: var(--surface); }
.push-shade-hd {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 6px 16px 10px;
}
.push-shade-clock {
display: flex; flex-direction: column; gap: 2px;
}
.push-shade-clock b {
font-size: 36px; font-weight: 300;
letter-spacing: -.03em; line-height: 1;
font-variant-numeric: tabular-nums;
}
.push-shade-clock span {
font-size: 12px; font-weight: 400;
color: rgba(242,242,247,.72);
text-transform: capitalize;
}
.push-shade-gear {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.1);
color: #f2f2f7;
margin-top: 4px;
}
.push-shade-qs {
display: flex; gap: 7px; justify-content: center;
padding: 0 14px 10px;
}
.push-shade-qs i {
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,.12);
display: block;
}
.push-shade-qs i.on {
background: #a8c7fa;
box-shadow: 0 0 0 1px rgba(168,199,250,.35);
}
.push-shade-bright {
height: 28px; margin: 0 14px 12px;
border-radius: 99px;
background: rgba(255,255,255,.12);
position: relative; overflow: hidden;
}
.push-shade-bright em {
position: absolute; left: 0; top: 0; bottom: 0; width: 62%;
border-radius: 99px;
background: rgba(255,255,255,.28);
}
.push-toast-shade {
margin: 0 12px;
padding: 13px 10px 13px 13px;
border-radius: 24px;
background: rgba(50, 52, 58, .88);
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 6px 20px rgba(0,0,0,.35);
color: #f2f2f7;
backdrop-filter: blur(36px) saturate(1.3);
-webkit-backdrop-filter: blur(36px) saturate(1.3);
}
.push-toast-shade .push-toast-app { color: var(--faint); font-weight: 600; }
.push-toast-shade .push-toast-when { color: var(--muted); }
.push-toast-shade .push-toast-title { color: #fff; }
.push-toast-shade .push-toast-body { color: #e4e4e8; }
.push-toast-shade .push-toast-chev { color: var(--muted); }
.push-toast-shade .push-toast-ico {
background: var(--surface-2);
box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
@media (max-width: 980px) {
.push-device { --pd-w: 268px; }
.push-lock-clock b { font-size: 62px; }
.push-toast { margin: 0 12px; }
.push-toast-shade { margin: 0 10px; }
.push-toast-ico { width: 28px; height: 28px; }
.push-shortcut { width: 36px; height: 36px; }
.push-lock-foot { padding: 0 24px 8px; }
.push-shade-clock b { font-size: 32px; }
.push-shade-qs i { width: 30px; height: 30px; }
}
.push-history { display: flex; flex-direction: column; gap: 8px; }
.push-hist-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 12px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surface);
}
.push-hist-row b {
font-size: 13px; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.push-hist-row span {
grid-column: 1 / -1;
font-size: 12px; color: var(--muted); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.push-hist-meta {
font-size: 11px; font-weight: 650; color: var(--faint); white-space: nowrap;
justify-self: end; text-align: right;
}
.push-hist-stats {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; gap: 6px;
}
.push-chip {
font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
background: var(--surface); color: var(--muted);
}
.push-chip.ok { background: var(--ok-bg); color: var(--ok); }
.push-chip.warn { background: var(--warn-bg); color: #b54708; }
.push-empty {
padding: 18px 12px; text-align: center; color: var(--faint);
font-size: 13px; font-weight: 600;
}
@media (max-width: 980px) {
.push-grid { grid-template-columns: 1fr; }
.push-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.push-hub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.push-kpis { grid-template-columns: 1fr 1fr; }
}
/* —— Push mailings constructor —— */
.mail-hub-hero {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 0 16px;
padding: 18px 20px 16px;
border-radius: 18px;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
box-shadow: var(--shadow);
}
.mail-hub-hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding-bottom: 14px;
}
.mail-hub-hero-copy { max-width: 38rem; flex: 1 1 280px; min-width: 0; }
.mail-hub-hero-copy .crumb { margin-bottom: 5px; }
.mail-hub-hero-copy h1 {
margin: 0 0 5px;
font-size: 26px;
font-weight: 750;
letter-spacing: -.03em;
font-family: var(--font-display);
line-height: 1.15;
}
.mail-hub-hero-sub {
margin: 0;
font-size: 13px;
line-height: 1.45;
font-weight: 500;
color: var(--muted);
max-width: 40rem;
}
.mail-hub-hero-meta {
display: flex;
align-items: center;
flex-shrink: 0;
padding-top: 24px;
}
.mail-hub-stat {
font-size: 12px;
font-weight: 500;
color: var(--faint);
font-variant-numeric: tabular-nums;
white-space: nowrap;
letter-spacing: .01em;
}
.mail-hub-hero-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--line) 48%, transparent);
}
.mail-hub-hero-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-left: auto;
}
.mail-hub-secondary {
appearance: none;
height: 36px;
padding: 0 14px;
font: inherit;
font-size: 13px;
font-weight: 650;
color: var(--text);
border: 1px solid var(--line-strong);
border-radius: 10px;
background: var(--surface);
box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.mail-hub-secondary:hover {
color: var(--text);
background: var(--surface-2);
border-color: var(--line-strong);
filter: none;
}
.mail-hub-secondary:active {
background: var(--surface);
transform: translateY(1px);
}
.mail-hub-primary {
appearance: none;
height: 36px;
padding: 0 18px;
border: 0;
border-radius: 10px;
background: linear-gradient(180deg, var(--acc) 0%, var(--acc) 100%);
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: -.01em;
cursor: pointer;
transition: background .15s ease, box-shadow .15s ease, transform .1s ease, filter .12s ease;
box-shadow: 0 2px 8px rgba(47, 107, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.mail-hub-primary:hover {
background: linear-gradient(180deg, #4a82ff 0%, var(--acc) 100%);
color: #fff;
filter: none;
box-shadow: 0 4px 12px rgba(47, 107, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.mail-hub-primary:active {
transform: translateY(1px);
box-shadow: 0 1px 4px rgba(47, 107, 255, .22);
}
.push-hub-tabs {
display: flex;
gap: 2px;
margin: 0;
padding: 3px;
width: fit-content;
max-width: 100%;
border-radius: 11px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.push-hub-tab {
border: 0;
background: transparent;
padding: 7px 15px;
min-height: 32px;
border-radius: 8px;
font: inherit;
font-size: 13px;
font-weight: 650;
color: var(--muted);
cursor: pointer;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
button.push-hub-tab:hover,
.push-hub-tab:hover {
color: var(--text);
background: rgba(255, 255, 255, .55);
filter: none;
}
.push-hub-tab.is-on {
background: var(--surface);
color: var(--text);
box-shadow:
0 1px 2px rgba(15, 23, 42, .07),
0 0 0 1px rgba(15, 23, 42, .04);
}
button.push-hub-tab.is-on:hover,
.push-hub-tab.is-on:hover {
background: var(--surface);
color: var(--text);
filter: none;
}
.push-stats-page {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Author display:flex must not override the HTML hidden attribute. */
#pushStatsPage[hidden],
#pushMailList[hidden],
#pushMailEditor[hidden],
.push-stats-page[hidden],
.push-stats-page.hidden,
#pushMailList.hidden,
#pushMailEditor.hidden {
display: none !important;
}
#view-push.is-hub-list #pushStatsPage,
#view-push.is-hub-stats #pushMailList,
#view-push.is-hub-editor #pushMailList,
#view-push.is-hub-editor #pushStatsPage,
#view-push.is-hub-editor > .mail-hub-hero {
display: none !important;
}
#view-push.is-hub-list #pushMailList { display: block; }
#view-push.is-hub-stats #pushStatsPage { display: flex; flex-direction: column; gap: 16px; }
#view-push.is-hub-editor #pushMailEditor { display: block; }
/* Push stats toolbar: 2 rows (grouping+filters / period+actions) */
#pushStatsPage .ps-toolbar.stats-toolbar {
margin-bottom: 0;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
row-gap: 10px;
overflow: visible;
}
#pushStatsPage .ps-toolbar-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
min-width: 0;
flex: 1 1 100%;
}
#pushStatsPage .ps-toolbar-filters {
flex: 1 1 100%;
}
#pushStatsPage .ps-toolbar-period {
flex: 1 1 100%;
justify-content: flex-start;
gap: 10px 12px;
}
#pushStatsPage .ps-toolbar .st-group-chain {
flex: 0 1 auto;
min-width: 0;
}
#pushStatsPage .ps-toolbar .stats-filters-main,
#pushStatsPage .ps-toolbar .stats-filters-period,
#pushStatsPage .ps-toolbar .stats-filters-actions {
flex: 0 1 auto;
min-width: 0;
gap: 8px;
}
#pushStatsPage .ps-toolbar .stats-filters-period {
flex: 1 1 auto;
gap: 8px 10px;
}
#pushStatsPage .ps-toolbar .stats-filters-actions {
flex: 0 0 auto;
margin-left: auto;
}
#pushStatsPage .ps-toolbar .rcal,
#pushStatsPage .ps-toolbar .date-range.rcal-shell {
min-width: 272px;
width: max-content;
flex: 0 0 auto;
}
#pushStatsPage .ps-toolbar .stats-tb-sep {
margin: 0 2px;
}
#pushStatsPage .lf select { min-width: 108px; max-width: 168px; }
#pushStatsPage #ps-mailing { min-width: 132px; max-width: 200px; }
.ps-table-card { margin-bottom: 0; }
.ps-kpis {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 0;
gap: 8px;
}
.ps-kpis .kpi {
min-height: 0;
padding: 12px 14px;
box-shadow: none;
}
.ps-kpis .kpi-val { font-size: 22px; margin-top: 4px; }
.ps-kpis .kpi-sub { margin-top: 2px; }
.ps-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 550;
color: var(--muted);
cursor: pointer;
user-select: none;
}
.ps-toggle input { accent-color: var(--acc); }
.ps-day-wrap {
max-height: min(42vh, 420px);
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
}
.ps-day-grid { min-width: 640px; }
.ps-day-grid td.is-err { color: #d92d20; }
#psDayTable tfoot .stats-total td {
border-top: 1px solid var(--line);
background: var(--surface-2);
font-weight: 650;
}
.ps-mail-count {
min-width: 28px;
padding: 2px 8px;
border-radius: 999px;
background: var(--surface);
color: #3b5bdb;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ps-mail-count:empty { display: none; }
.ps-drill-nav {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin: -2px 0 4px; font-size: 12px; color: var(--muted);
}
.ps-drill-nav[hidden] { display: none !important; }
.ps-drill-sep { color: var(--faint); margin: 0 2px; }
.ps-drill-crumb {
border: 0; background: transparent; padding: 0; font: inherit;
color: var(--acc); font-weight: 650; cursor: pointer;
}
.ps-drill-crumb:hover { text-decoration: underline; }
.ps-drill-crumb.is-cur { color: var(--text); font-weight: 700; cursor: default; }
.ps-drill-list {
display: flex; flex-direction: column; gap: 8px;
}
.ps-drill-list[hidden] { display: none !important; }
.ps-drill-empty {
padding: 28px 16px; text-align: center; color: var(--muted);
font-size: 13px; font-weight: 550;
border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2);
}
.ps-drill-row {
display: flex; align-items: center; gap: 12px; width: 100%;
text-align: left; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--line); background: var(--surface); cursor: pointer;
font: inherit; color: var(--text); transition: background .12s ease, border-color .12s ease;
}
.ps-drill-row:hover { background: var(--surface); border-color: var(--line); }
.ps-drill-ico {
flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
display: grid; place-items: center; background: var(--surface); color: #3b5bdb;
}
.ps-drill-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-drill-title {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0;
}
.ps-drill-title b {
font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-drill-kind {
font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: #3b5bdb; background: var(--surface); border-radius: 999px; padding: 2px 7px;
}
.ps-drill-count {
min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ps-drill-sub { font-size: 12px; color: var(--muted); font-weight: 550; }
.ps-drill-metrics {
display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: flex-end;
flex: 0 1 auto; max-width: 52%;
}
.ps-drill-metrics span {
display: flex; flex-direction: column; gap: 1px; min-width: 52px;
font-variant-numeric: tabular-nums;
}
.ps-drill-metrics em {
font-style: normal; font-size: 10px; font-weight: 650; color: var(--faint);
text-transform: uppercase; letter-spacing: .03em;
}
.ps-drill-metrics b { font-size: 13px; font-weight: 750; color: var(--text); line-height: 1.2; }
.ps-drill-metrics i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 550; }
.ps-drill-chev {
flex: 0 0 16px; width: 16px; height: 16px; position: relative; opacity: .45;
}
.ps-drill-chev::before {
content: ""; position: absolute; inset: 3px 5px 3px 3px;
border-right: 2px solid currentColor; border-top: 2px solid currentColor;
transform: rotate(45deg);
}
.ps-drill-row.is-sub { padding-left: 16px; }
@media (max-width: 900px) {
.ps-drill-metrics { max-width: none; width: 100%; justify-content: flex-start; }
.ps-drill-row { flex-wrap: wrap; }
.ps-drill-chev { display: none; }
}
.ps-mail-board {
display: flex;
flex-direction: column;
gap: 8px;
}
.ps-mail-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.ps-mail-search {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 220px;
min-width: 180px;
max-width: 360px;
height: 34px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
}
.ps-mail-search:focus-within {
border-color: rgba(47, 107, 255, .45);
box-shadow: 0 0 0 3px rgba(47, 107, 255, .1);
}
.ps-mail-search-ico { color: var(--faint); display: flex; }
.ps-mail-search input {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 4px 0 0 !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
font: inherit !important;
font-size: 13px !important;
color: var(--text) !important;
}
.ps-mail-search input::placeholder { color: var(--faint) !important; }
.ps-mail-search input[type="search"]::-webkit-search-decoration,
.ps-mail-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.ps-mail-sort {
height: 34px;
min-width: 148px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
font: inherit;
font-size: 12px;
font-weight: 550;
color: var(--text);
}
.ps-mail-modes {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 3px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
}
.ps-mail-mode {
height: 26px;
padding: 0 10px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.ps-mail-mode:hover { color: var(--text); background: rgba(255,255,255,.7); }
.ps-mail-mode.on {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.ps-mail-wrap {
max-height: min(48vh, 520px);
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
}
.ps-mail-grid { min-width: 760px; }
.ps-mail-grid thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--surface-2);
}
.ps-mail-grid .sticky-col {
position: sticky;
left: 0;
z-index: 1;
background: var(--surface);
min-width: 180px;
max-width: 280px;
}
.ps-mail-grid thead .sticky-col { z-index: 3; background: var(--surface-2); }
.ps-mail-cell { vertical-align: middle; }
.ps-mail-title {
display: block;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ps-mail-sub {
display: block;
margin-top: 2px;
font-size: 11px;
font-weight: 500;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ps-mail-tr.is-off .ps-mail-title { color: var(--muted); }
.ps-mail-tr.is-off .ps-mail-sub { color: var(--faint); }
.ps-mode-pill {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 650;
letter-spacing: .01em;
white-space: nowrap;
}
.ps-mode-pill.tone-trigger {
background: var(--surface);
color: #c05600;
}
.ps-mode-pill.tone-schedule {
background: var(--surface);
color: #3b5bdb;
}
.ps-mode-pill.tone-manual {
background: var(--surface);
color: var(--text);
}
.ps-mail-grid td.is-err { color: #d92d20; }
.ps-empty {
padding: 20px 14px;
text-align: center;
font-size: 13px;
color: var(--muted);
}
@media (max-width: 900px) {
.ps-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-mail-modes { width: 100%; }
.ps-mail-search { max-width: none; }
}
@media (max-width: 720px) {
.mail-hub-hero { padding: 14px 14px 12px; }
.mail-hub-hero-meta { padding-top: 0; width: 100%; }
.mail-hub-hero-top { padding-bottom: 12px; }
.mail-hub-hero-copy h1 { font-size: 22px; }
.mail-hub-hero-bar { flex-direction: column; align-items: stretch; padding-top: 12px; }
.mail-hub-hero-actions { margin-left: 0; width: 100%; }
.mail-hub-primary { flex: 1; }
.push-hub-tabs { width: 100%; }
.push-hub-tab { flex: 1; text-align: center; padding: 9px 10px; }
}
.mail-cta {
height: 36px;
background: linear-gradient(180deg, var(--acc) 0%, var(--acc) 100%) !important;
border: 0 !important;
border-radius: 10px !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(47, 107, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
padding: 0 16px !important;
font-weight: 700 !important;
letter-spacing: -.01em;
}
.mail-cta:hover {
filter: none;
color: #fff !important;
background: linear-gradient(180deg, #4a82ff 0%, var(--acc) 100%) !important;
box-shadow: 0 4px 12px rgba(47, 107, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.mail-cta:active {
filter: none;
box-shadow: 0 1px 4px rgba(47, 107, 255, .22);
}
.mail-hub-toolbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 14px;
}
.mail-search {
flex: 1 1 320px;
min-width: 220px;
max-width: none;
height: 44px;
border-radius: 14px;
}
.mail-search .mail-search-ico {
width: 32px;
height: 32px;
border-radius: 10px;
}
.mail-empty {
margin-top: 8px; padding: 48px 24px;
text-align: center; border-radius: 20px;
border: 1px dashed var(--line); background: var(--surface-2);
}
.mail-empty-ico {
width: 64px; height: 64px; margin: 0 auto 14px;
border-radius: 18px; display: flex; align-items: center; justify-content: center;
background: var(--acc-soft); color: var(--acc);
}
.mail-empty b {
display: block; font-size: 17px; font-weight: 750;
font-family: var(--font-display); letter-spacing: -.02em;
}
.mail-empty p {
margin: 8px auto 16px; max-width: 360px;
font-size: 13px; color: var(--muted); line-height: 1.45;
}
/* Grouped mailing board */
.mail-board,
.mail-cards {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
}
/* Selection dock: sticks under fixed topnav, right above the mailing list. */
.mail-list-stack {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
/* Sticky child needs a non-clipping ancestor */
overflow: visible;
}
.mail-sel-bar {
position: sticky;
top: calc(72px + 8px); /* below .topnav */
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 12px;
padding: 12px 16px;
border-radius: 16px;
background:
linear-gradient(135deg, var(--acc) 0%, var(--acc) 55%, var(--acc-hover) 100%);
border: 1px solid var(--acc-hover);
box-shadow:
0 14px 32px rgba(31, 79, 212, .28),
0 2px 0 rgba(255, 255, 255, .18) inset;
color: #fff;
}
.mail-sel-bar[hidden] { display: none !important; }
.mail-sel-bar.is-on {
box-shadow:
0 16px 36px rgba(31, 79, 212, .34),
0 0 0 3px rgba(47, 107, 255, .22),
0 2px 0 rgba(255, 255, 255, .2) inset;
}
.mail-sel-copy { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1 1 auto; }
.mail-sel-count {
font-size: 15px;
font-weight: 800;
color: #fff;
letter-spacing: -.015em;
white-space: nowrap;
text-shadow: 0 1px 0 rgba(15, 23, 42, .18);
}
.mail-sel-acts {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.mail-sel-seg {
display: inline-flex;
align-items: stretch;
gap: 0;
padding: 2px;
border-radius: 11px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .35);
flex-shrink: 0;
}
.mail-sel-seg-btn {
appearance: none;
border: 0;
margin: 0;
padding: 0 11px;
min-height: 32px;
border-radius: 9px;
background: transparent;
color: rgba(255, 255, 255, .88);
font: inherit;
font-size: 12px;
font-weight: 800;
line-height: 1.1;
cursor: pointer;
white-space: nowrap;
}
.mail-sel-seg-btn:hover {
background: rgba(255, 255, 255, .12);
color: #fff;
filter: none;
}
.mail-sel-seg-btn.on {
background: var(--surface);
color: var(--acc-hover);
box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.mail-sel-seg-btn.is-off.on {
color: var(--muted);
}
.mail-sel-edit {
padding: 8px 14px;
border-radius: 11px;
background: var(--surface);
color: var(--acc-hover);
border: 0;
box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.mail-sel-edit:hover {
background: var(--surface);
color: var(--acc-hover);
filter: none;
}
.mail-sel-bar .ghost {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .42);
color: #fff;
}
.mail-sel-bar .ghost:hover {
background: rgba(255, 255, 255, .24);
border-color: rgba(255, 255, 255, .55);
color: #fff;
filter: none;
}
.mail-group {
border: 1px solid var(--line);
border-radius: 22px;
background: var(--surface);
overflow: visible;
box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}
.mail-group-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 16px 18px;
border-bottom: 1px solid transparent;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
cursor: pointer;
user-select: none;
border-radius: 22px 22px 0 0;
}
.mail-group:not(.is-collapsed) .mail-group-hd {
border-bottom-color: var(--line);
}
.mail-group-title {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.mail-group-heading {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mail-group-heading-row {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.mail-group-hint {
font-size: 12px;
font-style: normal;
font-weight: 550;
color: var(--faint);
}
.mail-group-ico {
width: 38px; height: 38px; border-radius: 12px;
display: grid; place-items: center;
background: var(--acc-soft); color: var(--acc);
flex: 0 0 auto;
}
.mail-group[data-mode="trigger"] .mail-group-ico,
.mail-group.mail-g-custom .mail-group-ico {
background: var(--surface); color: #b54708;
}
.mail-group[data-mode="schedule"] .mail-group-ico,
.mail-group.mail-g-template_preset .mail-group-ico {
background: var(--surface); color: var(--acc);
}
.mail-group[data-mode="manual"] .mail-group-ico,
.mail-group.mail-g-template_user .mail-group-ico {
background: var(--surface); color: #099250;
}
.mail-group-title b,
.mail-group-heading-row b {
font-size: 16.5px; font-weight: 760;
letter-spacing: -.02em;
font-family: var(--font-display);
}
.mail-group-kind {
font-size: 10.5px; font-weight: 750;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--faint);
padding: 3px 7px;
border-radius: 999px;
background: var(--surface);
}
.mail-group.mail-g-template_preset .mail-group-kind {
background: var(--surface); color: var(--acc);
}
.mail-group.mail-g-template_user .mail-group-kind {
background: var(--surface); color: #099250;
}
.mail-group.mail-g-custom .mail-group-kind {
background: var(--surface); color: #b54708;
}
.mail-group-count {
min-width: 22px; height: 22px; padding: 0 7px;
border-radius: 999px;
display: inline-grid; place-items: center;
font-size: 11px; font-weight: 750;
background: var(--surface); color: var(--muted);
}
.mail-group-hd-right {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.mail-group-chev {
width: 10px; height: 10px;
border-right: 2px solid var(--line-strong);
border-bottom: 2px solid var(--line-strong);
transform: rotate(45deg);
transition: transform .18s ease;
margin: 0 2px 4px;
flex: 0 0 auto;
}
.mail-group.is-collapsed .mail-group-chev {
transform: rotate(-45deg);
margin-bottom: 0;
}
.mail-group-body {
background: var(--surface-2);
border-radius: 0 0 22px 22px;
padding: 10px 12px 12px;
}
.mail-group-body[hidden] { display: none !important; }
.mail-group.mail-g-custom .mail-group-body,
.mail-group.mail-g-template_user .mail-group-body,
.mail-group.mail-g-orphan .mail-group-body {
background: var(--surface-2);
}
.mail-group.mail-g-orphan .mail-group-ico {
background: var(--surface);
color: var(--muted);
}
.mail-group.mail-g-orphan .mail-group-heading-row b {
font-size: 15px;
font-weight: 680;
}
.mail-group.mail-g-orphan .mail-group-hint {
font-weight: 500;
}
.mail-group-empty {
margin: 0;
padding: 18px 20px 20px;
font-size: 13px;
font-weight: 550;
color: var(--faint);
}
.mail-group-foot {
display: flex;
gap: 8px;
padding: 0 14px 14px;
}
.mail-group-mini {
border: 0;
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 12.5px;
font-weight: 700;
padding: 7px 12px;
border-radius: 10px;
cursor: pointer;
}
.mail-group-mini:hover { background: var(--surface); }
.mail-group-mini.danger {
background: var(--surface);
color: #b42318;
}
.mail-group-mini.danger:hover { background: var(--surface); }
.mail-tpl-row { cursor: default; }
.mail-tpl-row:hover { border-color: var(--line); box-shadow: none; }
.mail-tpl-mark {
width: 36px; height: 36px; border-radius: 12px;
display: grid; place-items: center;
background: var(--surface); color: var(--acc);
font-size: 15px; font-weight: 700;
flex: 0 0 auto;
}
.mail-tpl-stats { justify-content: flex-start; }
.mail-tpl-tag {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--surface);
color: var(--acc);
font-size: 11px;
font-weight: 750;
}
.mail-tpl-add {
border: 0;
background: var(--acc);
color: #fff;
font: inherit;
font-size: 12.5px;
font-weight: 750;
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
white-space: nowrap;
}
.mail-tpl-add:hover { filter: brightness(.96); }
.mail-group-modal-card { max-width: 440px; }
.mail-connect-apps-card { max-width: 480px; }
.mail-connect-apps-bar {
display: flex; align-items: center; gap: 10px;
margin: 4px 0 10px;
}
.mail-connect-apps-count {
margin-left: auto;
font-size: 12px; font-weight: 700;
color: var(--muted);
padding: 4px 8px;
border-radius: 999px;
background: var(--surface);
}
.mail-connect-apps-count.is-empty { color: #b42318; background: var(--surface); }
.mail-connect-apps-list {
max-height: min(46vh, 360px);
overflow: auto;
display: flex;
flex-direction: column;
gap: 6px;
padding: 2px 0 4px;
}
.mail-group-hd-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
max-width: min(100%, 640px);
}
.mail-batch-acts {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.mail-batch-seg {
display: inline-flex;
align-items: stretch;
gap: 0;
padding: 2px;
border-radius: 9px;
background: var(--surface);
border: 1px solid var(--line);
flex-shrink: 0;
}
.mail-batch-seg-btn {
appearance: none;
border: 0;
margin: 0;
padding: 0 9px;
min-height: 26px;
border-radius: 7px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 11.5px;
font-weight: 750;
line-height: 1.1;
cursor: pointer;
white-space: nowrap;
}
.mail-batch-seg-btn:hover {
color: var(--ink);
filter: none;
}
.mail-batch-seg-btn.on {
background: var(--surface);
color: var(--acc);
box-shadow: 0 1px 2px rgba(16, 24, 40, .07);
}
.mail-batch-seg-btn.is-off.on {
color: var(--muted);
}
.mail-batch-btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 10px;
font: inherit;
font-size: 12.5px;
font-weight: 700;
letter-spacing: -.01em;
cursor: pointer;
white-space: nowrap;
line-height: 1;
background: var(--surface);
color: var(--text);
box-shadow: none;
transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, filter .12s ease;
}
.mail-batch-btn.is-connect,
.mail-batch-btn.is-on {
background: linear-gradient(180deg, var(--acc) 0%, var(--acc) 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 1px 3px rgba(47, 107, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.mail-batch-btn.is-connect:hover,
.mail-batch-btn.is-on:hover {
filter: none;
background: linear-gradient(180deg, #4a82ff 0%, var(--acc) 100%);
box-shadow: 0 3px 8px rgba(47, 107, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.mail-batch-btn.is-off {
background: var(--surface);
color: var(--text);
border-color: var(--line);
}
.mail-batch-btn.is-off:hover {
background: var(--surface);
border-color: var(--line);
filter: none;
}
.mail-batch-btn.is-compact {
height: 28px;
padding: 0 9px;
font-size: 11.5px;
border-radius: 8px;
background: var(--surface);
color: var(--muted);
border: 1px solid var(--line);
font-weight: 700;
}
.mail-batch-btn.is-compact.is-connect,
.mail-batch-btn.is-compact.is-on {
background: var(--surface);
color: var(--acc);
border-color: #d0deff;
box-shadow: none;
}
.mail-batch-btn.is-compact.is-off {
background: var(--surface);
color: var(--muted);
border-color: var(--line);
box-shadow: none;
}
.mail-batch-btn.is-compact:hover {
filter: none;
background: var(--surface);
color: var(--ink);
border-color: var(--line-strong);
}
.mail-batch-btn.is-compact.is-connect:hover,
.mail-batch-btn.is-compact.is-on:hover {
background: var(--surface);
color: var(--acc);
border-color: #b8ccff;
}
.mail-more {
position: relative;
display: inline-flex;
}
.mail-more-btn {
width: 32px; height: 32px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.mail-more-btn:hover,
.mail-more.is-open .mail-more-btn {
background: var(--surface);
color: var(--ink);
}
.mail-more-menu {
position: absolute;
right: 0;
top: calc(100% + 4px);
z-index: 20;
min-width: 200px;
padding: 6px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
display: flex;
flex-direction: column;
gap: 2px;
}
.mail-more-menu[hidden] { display: none !important; }
.mail-more-item {
border: 0;
background: transparent;
text-align: left;
font: inherit;
font-size: 13px;
font-weight: 650;
color: var(--ink);
padding: 9px 10px;
border-radius: 9px;
cursor: pointer;
white-space: nowrap;
}
.mail-more-item:hover { background: var(--surface); }
.mail-more-item.is-danger { color: #b42318; }
.mail-subgroups {
display: flex;
flex-direction: column;
gap: 8px;
}
.mail-subgroup {
margin: 0;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
overflow: visible;
box-shadow: none;
}
.mail-group > .mail-group-list {
padding: 4px 2px 2px;
}
.mail-subgroup-hd {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 11px 12px;
margin: 0;
cursor: pointer;
user-select: none;
background: var(--surface);
border-radius: 16px;
}
.mail-subgroup:not(.is-collapsed) .mail-subgroup-hd {
border-radius: 16px 16px 0 0;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.mail-subgroup-hd:hover { background: var(--surface); }
.mail-subgroup-title {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
flex: 1 1 auto;
}
.mail-subgroup-type {
font-size: 10.5px;
font-weight: 750;
letter-spacing: .03em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 999px;
background: var(--surface);
color: var(--muted);
flex: 0 0 auto;
}
.mail-subgroup-type.tone-schedule {
background: var(--surface);
color: var(--acc);
}
.mail-subgroup-type.tone-events {
background: var(--surface);
color: #b54708;
}
.mail-subgroup-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--surface-2);
flex: 0 0 auto;
}
.mail-subgroup-hd b {
font-size: 13.5px; font-weight: 750;
letter-spacing: -.01em;
}
.mail-subgroup-count {
min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 999px;
display: inline-grid; place-items: center;
font-size: 11px; font-weight: 750;
background: var(--surface); color: var(--muted);
}
.mail-subgroup-meta {
font-size: 11.5px;
font-weight: 650;
color: var(--faint);
}
.mail-subgroup-meta.is-on { color: #099250; }
.mail-subgroup-acts {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
opacity: .85;
}
.mail-subgroup-hd:hover .mail-subgroup-acts { opacity: 1; }
.mail-subgroup-chev {
width: 9px; height: 9px;
border-right: 2px solid var(--line-strong);
border-bottom: 2px solid var(--line-strong);
transform: rotate(45deg);
transition: transform .18s ease;
margin: 0 2px 3px 4px;
flex: 0 0 auto;
}
.mail-subgroup.is-collapsed .mail-subgroup-chev {
transform: rotate(-45deg);
margin-bottom: 0;
}
.mail-subgroup-body {
padding: 6px 8px 10px;
background: transparent;
border-radius: 0 0 12px 12px;
border-left: 0;
margin-left: 0;
}
.mail-subgroup-body[hidden] { display: none !important; }
.mail-group-list {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Group-row secondary suite: one shared outline language */
.mail-batch-btn.is-select,
.mail-batch-btn.is-apps,
.mail-batch-btn.is-edit,
.mail-batch-btn.is-clone {
background: var(--surface);
color: var(--text);
border-color: var(--line-strong);
box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
.mail-batch-btn.is-select:hover,
.mail-batch-btn.is-apps:hover,
.mail-batch-btn.is-edit:hover,
.mail-batch-btn.is-clone:hover {
background: var(--surface-2);
border-color: var(--line-strong);
color: var(--text);
filter: none;
}
.mail-batch-btn.is-edit,
.mail-batch-btn.is-clone {
display: inline-flex;
align-items: center;
gap: 6px;
}
.mail-batch-btn-ico {
display: inline-grid;
place-items: center;
width: 14px;
height: 14px;
color: inherit;
opacity: .88;
}
.mail-batch-btn-ico svg {
width: 14px;
height: 14px;
display: block;
}
.mail-batch-btn.is-compact.is-select,
.mail-batch-btn.is-compact.is-apps {
background: var(--surface);
border-color: var(--line);
color: var(--muted);
box-shadow: none;
}
.mail-batch-btn.is-add {
background: var(--surface);
color: var(--acc);
border-color: #c9d7ff;
box-shadow: none;
font-weight: 750;
}
.mail-batch-btn.is-add:hover {
background: var(--surface);
border-color: #a8bfff;
color: var(--acc-hover);
filter: none;
}
.mail-batch-btn.is-compact.is-add {
background: var(--surface);
border-color: #d0deff;
color: var(--acc);
padding-left: 10px;
padding-right: 10px;
box-shadow: none;
}
@media (max-width: 720px) {
.mail-group-hd-actions {
width: 100%;
justify-content: flex-start;
max-width: none;
}
}
.mail-bulk-edit-card { max-width: 520px; }
/* Shared custom checkbox (list pick + bulk modal fields). */
.mail-check {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
cursor: pointer;
user-select: none;
position: relative;
font-weight: 700;
color: var(--text);
}
.mail-check input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.mail-check > i {
width: 20px;
height: 20px;
border-radius: 7px;
border: 1.5px solid var(--line-strong);
background: var(--surface);
flex: none;
display: grid;
place-items: center;
box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.mail-check:hover > i {
border-color: #9db6ff;
box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}
.mail-check input:focus-visible + i {
outline: 2px solid #9db6ff;
outline-offset: 1px;
}
.mail-check.is-on > i,
.mail-check input:checked + i {
background: var(--acc);
border-color: var(--acc);
box-shadow: 0 4px 10px rgba(47, 107, 255, .28);
}
.mail-check.is-on > i::after,
.mail-check input:checked + i::after {
content: "";
width: 9px;
height: 5px;
border-left: 2px solid var(--line);
border-bottom: 2px solid var(--line);
transform: rotate(-45deg) translateY(-1px);
}
.mail-bulk-check {
margin-bottom: 8px;
min-height: 28px;
}
.mail-connect-apps-list.is-bulk {
max-height: min(32vh, 240px);
}
.mail-connect-apps-list.is-disabled { opacity: .45; pointer-events: none; }
.modal-actions-spacer { flex: 1; }
.modal-actions .ghost.danger { color: #b42318; }
.mail-row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
align-items: center;
gap: 10px 12px;
padding: 9px 12px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
cursor: default;
transition: background .14s ease, border-color .14s ease;
}
.mail-row.has-pick {
grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
cursor: pointer;
}
.mail-row.is-picked {
border-color: #c5d4ff;
background: var(--surface);
}
.mail-row-pick {
width: 24px;
height: 24px;
display: grid;
place-items: center;
justify-self: center;
font-weight: 400;
}
.mail-row-pick > i {
width: 18px;
height: 18px;
}
.mail-row::before {
content: "";
position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
border-radius: 0 2px 2px 0;
background: transparent;
}
.mail-row.is-on::before { background: var(--ok); }
@keyframes mail-row-just-added {
0% {
background: var(--surface);
border-color: #c5d4ff;
}
70% {
background: var(--surface);
border-color: var(--line);
}
100% {
background: transparent;
border-color: transparent;
}
}
.mail-row.is-just-added {
animation: mail-row-just-added 2.5s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
.mail-row.is-just-added {
animation: none;
background: var(--surface);
border-color: #c5d4ff;
transition: background 1.2s ease, border-color 1.2s ease;
}
}
.mail-row:hover {
background: var(--surface);
border-color: var(--line);
}
.mail-row-main {
display: flex; align-items: center; gap: 0;
min-width: 0;
padding-left: 2px;
}
.mail-row-copy { min-width: 0; }
.mail-row-copy b {
display: block;
font-size: 13.5px; font-weight: 700;
letter-spacing: -.015em;
font-family: var(--font-display);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-row-subline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 6px;
margin-top: 2px;
min-width: 0;
}
.mail-row-apps { display: none; }
.mail-row-copy > span:not(.mail-row-subline) {
display: block; margin-top: 2px;
font-size: 12px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-time-chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 0;
border-radius: 0;
font-size: 11.5px;
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.25;
white-space: nowrap;
flex: 0 0 auto;
border: 0;
background: transparent;
color: var(--muted);
}
.mail-time-chip-ico {
flex: none;
opacity: .7;
}
.mail-time-chip.is-schedule,
.mail-time-chip.is-delay,
.mail-time-chip.is-weekly,
.mail-time-chip.is-manual,
.mail-time-chip.is-soft {
background: transparent;
border-color: transparent;
color: var(--muted);
}
.mail-row-meta {
display: flex; flex-wrap: wrap; gap: 6px;
justify-content: flex-end;
align-items: center;
}
.mail-row-switch {
width: auto; height: 22px; flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 0;
padding: 0;
cursor: pointer;
z-index: 2;
}
.mail-row-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.mail-row-switch i {
position: relative; width: 34px; height: 20px; flex: 0 0 34px;
background: var(--surface-2); border-radius: 20px; transition: .2s;
display: block;
}
.mail-row-switch i::after {
content: "";
position: absolute; left: 2px; top: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: var(--surface);
box-shadow: 0 1px 2px rgba(15,23,42,.16);
transition: transform .2s ease;
}
.mail-row-switch input:checked + i { background: var(--ok); }
.mail-row-switch input:checked + i::after { transform: translateX(14px); }
.mail-row-switch-lab { display: none; }
.mail-row-switch:hover i { filter: brightness(.97); }
.mail-row-stats {
display: flex; gap: 6px 10px; flex-wrap: wrap;
justify-content: flex-end;
font-size: 11.5px; color: var(--muted); font-weight: 550;
white-space: nowrap;
min-width: 0;
}
.mail-row-stats.is-empty {
min-width: 0;
width: 0;
overflow: hidden;
gap: 0;
}
.mail-row-stats em {
font-style: normal; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
}
.mail-row-actions {
display: inline-flex;
align-items: center;
gap: 2px;
justify-self: end;
cursor: default;
}
.mail-row-ico {
appearance: none; border: 1px solid transparent;
width: 30px; height: 30px; padding: 0;
border-radius: 8px;
display: grid; place-items: center;
background: transparent; color: var(--faint);
cursor: pointer; flex: none;
box-shadow: none;
z-index: 2;
filter: none;
transition: background .14s ease, color .14s ease, opacity .14s ease;
}
.mail-row-ico svg {
width: 15px; height: 15px;
display: block;
}
.mail-row-clone,
.mail-row-del {
opacity: 0;
}
.mail-row:hover .mail-row-clone,
.mail-row:hover .mail-row-del,
.mail-row:focus-within .mail-row-clone,
.mail-row:focus-within .mail-row-del,
.mail-row.is-picked .mail-row-clone,
.mail-row.is-picked .mail-row-del {
opacity: 1;
}
.mail-row-edit:hover,
.mail-row-clone:hover {
background: var(--surface);
color: var(--acc);
filter: none;
}
.mail-row-del:hover {
background: var(--surface);
color: #d92d20;
filter: none;
}
.mail-row-edit:focus-visible,
.mail-row-clone:focus-visible {
outline: 2px solid #9db6ff;
outline-offset: 1px;
opacity: 1;
}
.mail-row-del:focus-visible {
outline: 2px solid #fda29b;
outline-offset: 1px;
opacity: 1;
}
@media (max-width: 720px) {
.mail-row-clone,
.mail-row-del { opacity: 1; }
}
.mail-badge {
font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
background: var(--surface); color: var(--muted);
}
.mail-badge.on { background: var(--ok-bg); color: var(--ok); }
.mail-badge.off { background: var(--surface); color: var(--faint); }
.mail-badge.mode { background: var(--acc-soft); color: var(--acc); }
.mail-badge.soft { background: var(--surface); color: var(--muted); }
@media (max-width: 900px) {
.mail-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.mail-row.has-pick {
grid-template-columns: 32px minmax(0, 1fr) auto;
}
.mail-row-meta,
.mail-row-stats {
grid-column: 1;
justify-content: flex-start;
}
.mail-row.has-pick .mail-row-meta,
.mail-row.has-pick .mail-row-stats {
grid-column: 2;
}
.mail-row-actions {
grid-column: 2;
grid-row: 1 / span 3;
align-self: start;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.mail-row.has-pick .mail-row-actions {
grid-column: 3;
}
.mail-row-edit {
justify-content: center;
padding: 0 10px;
}
}
.mail-editor { animation: mailEdIn .3s cubic-bezier(.2,.8,.2,1); }
@keyframes mailEdIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.mail-ed-shell {
border-radius: 22px;
border: 1px solid var(--line);
background:
radial-gradient(70% 80% at 0% 0%, rgba(47,107,255,.07), transparent 50%),
var(--surface);
overflow: hidden;
}
.mail-ed-top {
display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
padding: 18px 20px 14px;
background: rgba(255,255,255,.72);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(10px);
}
.mail-ed-back {
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 12px; margin-top: 2px;
border-radius: 10px; border: 1px solid var(--line);
background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; font-weight: 650;
cursor: pointer;
}
.mail-ed-back:hover { color: var(--acc); border-color: #b9c9ff; background: var(--acc-soft); }
.mail-ed-head { flex: 1; min-width: 200px; }
.mail-ed-kicker {
font-size: 11px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--faint);
}
.mail-ed-head h1 {
margin: 4px 0 8px; font-size: 26px; font-weight: 750;
letter-spacing: -.03em; font-family: var(--font-display);
}
.mail-ed-status {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 650; color: var(--muted);
}
.mail-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--surface-2);
box-shadow: 0 0 0 3px #eef0f4;
}
.mail-dot.on {
background: var(--ok);
box-shadow: 0 0 0 3px var(--ok-bg);
}
.mail-ed-actions {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.mail-ed-actions .danger { color: #b42318; }
.mail-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 14px 16px 0;
}
.mail-step {
appearance: none; border: 1px solid transparent; cursor: pointer;
height: auto; width: auto;
display: flex; align-items: center; gap: 10px;
padding: 12px 12px; border-radius: 14px;
background: transparent; color: var(--muted);
font: inherit; font-size: 13px; font-weight: 650;
transition: .18s ease; text-align: left;
}
button.mail-step:hover { background: rgba(255,255,255,.7); color: var(--text); }
.mail-step em {
width: 26px; height: 26px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); color: var(--muted);
font-style: normal; font-size: 12px; font-weight: 750; flex: none;
}
button.mail-step.is-on,
button.mail-step.is-on:hover,
.mail-step.is-on {
background: var(--surface); color: var(--text);
border-color: var(--line);
box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}
.mail-step.is-on em {
background: var(--acc); color: #fff;
}
.mail-step.is-done:not(.is-on) em {
background: var(--ok-bg); color: var(--ok);
}
.mail-save-banner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 12px 16px 0;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid #b7e4c7;
background:
radial-gradient(90% 140% at 0% 0%, rgba(18,183,106,.12), transparent 55%),
linear-gradient(135deg, var(--surface) 0%, var(--surface) 100%);
box-shadow: 0 8px 22px rgba(18, 183, 106, .08);
}
.mail-save-banner[hidden] { display: none !important; }
.mail-save-banner.is-pulse {
animation: mailSavePulse .55s ease;
}
@keyframes mailSavePulse {
0% { transform: translateY(-4px); opacity: .55; }
100% { transform: none; opacity: 1; }
}
.mail-save-banner-ico {
flex: 0 0 auto;
width: 40px; height: 40px; border-radius: 12px;
display: grid; place-items: center;
background: #12b76a; color: #fff;
box-shadow: 0 6px 14px rgba(18, 183, 106, .28);
}
.mail-save-banner-copy {
flex: 1 1 200px;
min-width: 0;
}
.mail-save-banner-copy b {
display: block;
font-size: 15px; font-weight: 750;
letter-spacing: -.02em;
color: #0f5132;
font-family: var(--font-display);
}
.mail-save-banner-copy p {
margin: 3px 0 0;
font-size: 13px; line-height: 1.4;
color: #3f6b54; font-weight: 550;
}
.mail-save-banner-acts {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-left: auto;
}
.mail-save-banner-acts .mail-cta {
box-shadow: 0 6px 14px rgba(47,107,255,.22);
}
.mail-tab-panes { padding: 14px 16px 0; }
.mail-pane { display: none; animation: mailEdIn .22s ease; }
.mail-pane.is-on { display: block; }
.mail-panel {
background: var(--surface); border: 1px solid var(--line);
border-radius: 18px; padding: 18px 18px 16px;
box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
/* Per-mailing stats funnel */
.mail-stats-top {
margin: 0 0 14px;
padding: 18px;
border-radius: 18px;
border: 1px solid var(--line);
background:
radial-gradient(90% 120% at 0% 0%, rgba(47,107,255,.07), transparent 55%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.mail-stats-hd {
display: flex; flex-wrap: wrap; align-items: flex-start;
justify-content: space-between; gap: 12px 16px;
margin: 0 0 16px;
}
.mail-stats-hd h3 {
margin: 0; font-size: 17px; font-weight: 750;
letter-spacing: -.02em; font-family: var(--font-display);
}
.mail-stats-hd p {
margin: 4px 0 0; font-size: 13px; color: var(--faint); line-height: 1.4;
}
.mail-stats-range { display: flex; gap: 6px; flex-wrap: wrap; }
.mail-stats-range .ghost.mini {
height: 30px; padding: 0 11px; border-radius: 8px;
font-size: 12px; font-weight: 650;
}
.mail-stats-range .ghost.mini.on {
background: var(--acc); color: #fff; border-color: var(--acc);
}
.mail-stats-range .ghost.mini.on:hover {
background: var(--acc-hover); color: #fff; border-color: var(--acc-hover);
filter: none;
}
.mail-stats-range .ghost.mini:not(.on):hover {
background: var(--acc-soft); color: var(--acc); border-color: #b9c9ff;
filter: none;
}
.mail-funnel { margin: 0 0 16px; }
.mail-funnel-track {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
gap: 0 8px;
align-items: end;
min-height: 160px;
}
.mail-funnel-step {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 5px; min-width: 0;
padding: 8px 6px 4px;
border-radius: 14px;
background: var(--surface-2);
}
.mail-funnel-bar-wrap {
width: 100%; max-width: 52px; height: 100px;
display: flex; align-items: flex-end; justify-content: center;
}
.mail-funnel-bar {
width: 100%; max-width: 36px; min-height: 8px;
border-radius: 10px 10px 6px 6px;
background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
box-shadow: 0 8px 18px rgba(124,58,237,.16);
transition: height .4s cubic-bezier(.2,.8,.2,1);
}
.mail-funnel-step.tone-sent .mail-funnel-bar,
.mail-funnel-step.tone-push .mail-funnel-bar {
background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
box-shadow: 0 8px 18px rgba(124,58,237,.16);
}
.mail-funnel-step.tone-open .mail-funnel-bar {
background: linear-gradient(180deg, #5ec8ff 0%, #0ea5e9 100%);
box-shadow: 0 8px 18px rgba(14,165,233,.16);
}
.mail-funnel-step.tone-reg .mail-funnel-bar {
background: linear-gradient(180deg, #5ee0b0 0%, #12b76a 100%);
box-shadow: 0 8px 18px rgba(18,183,106,.16);
}
.mail-funnel-step.tone-dep .mail-funnel-bar {
background: linear-gradient(180deg, #f6c86b 0%, #f79009 100%);
box-shadow: 0 8px 18px rgba(247,144,9,.16);
}
.mail-funnel-step b {
font-size: 20px; font-weight: 750; letter-spacing: -.03em;
font-variant-numeric: tabular-nums; color: var(--text);
font-family: var(--font-display);
}
.mail-funnel-step span {
font-size: 12px; font-weight: 650; color: var(--muted);
}
.mail-funnel-step em {
font-style: normal; font-size: 11px; font-weight: 700;
color: var(--faint); font-variant-numeric: tabular-nums;
padding: 2px 7px; border-radius: 999px; background: var(--surface);
}
.mail-funnel-bridge {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; width: 44px; margin-bottom: 56px; align-self: end;
}
.mail-funnel-bridge::before {
content: "";
width: 100%; height: 2px;
background: linear-gradient(90deg, var(--surface-2), var(--surface-2));
border-radius: 2px;
}
.mail-funnel-bridge em {
font-style: normal;
font-size: 10px; font-weight: 750;
color: var(--acc);
background: var(--acc-soft);
padding: 2px 6px; border-radius: 999px;
white-space: nowrap;
}
.mail-funnel-track.is-empty .mail-funnel-bar { opacity: .35; }
.mail-funnel-note {
margin: 12px 0 0; font-size: 12px; color: var(--faint); line-height: 1.4;
}
.mail-stats-kpis { margin: 0; }
@media (max-width: 720px) {
.mail-funnel-track {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mail-funnel-bridge { display: none; }
.mail-funnel-bar-wrap { height: 72px; }
}
.mail-panel-hd { margin-bottom: 14px; }
.mail-panel-hd h3 {
margin: 0; font-size: 16px; font-weight: 750;
letter-spacing: -.02em; font-family: var(--font-display);
}
.mail-panel-hd p {
margin: 4px 0 0; font-size: 13px; color: var(--faint); line-height: 1.4;
}
.mail-split {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: 14px;
align-items: start;
}
.mail-aside {
border-radius: 18px; padding: 16px;
border: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
min-width: 0;
overflow: hidden;
container-type: inline-size;
container-name: mail-aud;
}
.mail-aside-hd {
font-size: 11px; font-weight: 750; letter-spacing: .05em;
text-transform: uppercase; color: #7b89ad; margin-bottom: 12px;
}
.mail-aside-seg {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 8px 12px;
align-items: start;
padding: 12px; border-radius: 14px; background: var(--surface);
border: 1px solid var(--line); margin-bottom: 12px;
}
.mail-aside-seg-txt {
min-width: 0;
grid-column: 2;
grid-row: 1;
}
.mail-aside-ico {
width: 34px; height: 34px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: var(--acc-soft); color: var(--acc);
grid-column: 1; grid-row: 1;
}
.mail-aside-ico svg { display: block; }
.mail-mode-ico svg { display: block; }
.mail-aside-seg-txt > .mail-aside-hd { margin-bottom: 2px; }
.mail-aside-seg b {
display: block; font-size: 13px; font-weight: 750;
line-height: 1.3;
overflow-wrap: anywhere;
}
.mail-aside-seg-txt > p {
margin: 3px 0 0; font-size: 12px; color: var(--muted);
line-height: 1.4;
overflow-wrap: anywhere;
word-break: normal;
}
.mail-aside-size {
grid-column: 3; grid-row: 1;
min-width: 56px;
max-width: 7.5rem;
width: max-content;
text-align: right;
line-height: 1.15;
justify-self: end;
padding-right: 2px;
box-sizing: border-box;
}
.mail-aside-size strong {
display: block;
font-size: 20px; font-weight: 780;
letter-spacing: -.03em;
color: var(--acc);
font-variant-numeric: tabular-nums;
font-family: var(--font-display);
}
.mail-aside-size span {
display: block;
margin-top: 2px;
font-size: 10px; font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--muted);
line-height: 1.25;
overflow-wrap: anywhere;
}
.mail-aside-hint {
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255, 244, 229, .85);
border: 1px solid #f5d0a9;
font-size: 11px; font-weight: 600;
color: #9a3412;
line-height: 1.4;
overflow-wrap: anywhere;
}
.mail-aside-hint[hidden] { display: none !important; }
.mail-aside:not(.is-trigger) .mail-aside-hint,
.mail-aud-bar:not(.is-trigger) .mail-aside-hint {
background: var(--surface);
border-color: var(--line);
color: #4b5d86;
}
.mail-aside-size.is-empty strong,
.mail-aside-size.is-zero strong { color: var(--faint); }
.mail-aside-size.is-pool strong { color: #b54708; }
.mail-aside.is-trigger,
.mail-aud-bar.is-trigger {
border-color: #f5d0a9;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.mail-aside.is-trigger .mail-aside-hd,
.mail-aud-bar.is-trigger .mail-aside-hd { color: #b54708; }
.mail-aside.is-trigger .mail-aside-ico,
.mail-aud-bar.is-trigger .mail-aside-ico {
background: var(--surface); color: #b54708;
}
.mail-aside.is-trigger .mail-aside-seg,
.mail-aud-bar.is-trigger .mail-aside-seg {
border-color: #f5d0a9;
}
.mail-aside-apps {
display: flex; flex-direction: column; gap: 6px;
margin: 0 0 12px;
}
.mail-aud-chip {
display: flex; align-items: center; gap: 8px;
padding: 7px 9px;
border-radius: 11px;
background: rgba(255,255,255,.72);
border: 1px solid var(--line);
min-width: 0;
}
.mail-aud-chip img,
.mail-aud-ph {
width: 24px; height: 24px; border-radius: 7px; flex: none;
object-fit: cover; background: var(--surface);
}
.mail-aud-ph {
display: inline-grid; place-items: center;
font-size: 11px; font-weight: 800; color: var(--acc-hover);
}
.mail-aud-chip em {
flex: 1; min-width: 0;
font-style: normal; font-size: 12.5px; font-weight: 650;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text);
}
.mail-aud-chip b {
flex: none;
font-size: 12px; font-weight: 750;
color: var(--acc);
font-variant-numeric: tabular-nums;
}
.mail-aud-empty {
padding: 10px 12px;
border-radius: 11px;
border: 1px dashed var(--line);
background: rgba(255,255,255,.45);
font-size: 12px; font-weight: 550; color: var(--faint);
text-align: center;
}
.mail-aside-list {
margin: 0; padding: 0 0 0 16px;
font-size: 12px; color: #5d6b8a; line-height: 1.55;
}
.mail-aud-bar {
margin: 0 0 14px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
min-width: 0;
container-type: inline-size;
container-name: mail-aud;
}
.mail-aud-bar .mail-aside-hd { margin-bottom: 2px; }
.mail-aud-bar .mail-aside-seg { margin-bottom: 10px; }
.mail-aud-bar .mail-aside-apps {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 6px;
margin: 0;
}
.mail-aud-bar .mail-aud-empty { grid-column: 1 / -1; }
.mail-aside.is-empty .mail-aside-size strong,
.mail-aud-bar.is-empty .mail-aside-size strong { color: var(--faint); }
/* When the audience card itself is narrow, stack counter so copy never collapses */
@container mail-aud (max-width: 360px) {
.mail-aside-seg {
grid-template-columns: auto minmax(0, 1fr);
}
.mail-aside-size {
grid-column: 2;
grid-row: 2;
justify-self: start;
text-align: left;
max-width: none;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
min-width: 0;
}
.mail-aside-size strong {
display: inline; font-size: 18px;
}
.mail-aside-size span {
display: inline; margin-top: 0; text-transform: none;
font-size: 12px; letter-spacing: 0;
}
.mail-aside-hint {
grid-column: 1 / -1;
grid-row: 3;
}
}
@container mail-aud (max-width: 420px) {
.mail-aside-apps {
grid-template-columns: 1fr !important;
}
}
.mail-pwa-field > label { display: none; }
.mail-pwa-hd {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
.mail-pwa-hd label {
display: block; margin: 0 0 2px;
font-size: 13px; font-weight: 650; color: var(--muted);
}
.mail-pwa-sub {
margin: 0; font-size: 12px; color: var(--faint); line-height: 1.35;
}
.mail-pwa-badge {
flex: none; min-width: 34px; height: 28px; padding: 0 10px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--acc-soft); color: var(--acc);
font-size: 12px; font-weight: 750;
}
.mail-pwa-badge.is-empty {
background: var(--surface); color: var(--faint);
}
.mail-pwa-picker {
border: 1px solid var(--line);
border-radius: 16px;
background:
linear-gradient(180deg, var(--surface) 0%, var(--surface) 42%);
overflow: hidden;
box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.mail-pwa-selected {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 12px 12px 0;
min-height: 0;
}
.mail-pwa-selected:empty {
display: none;
}
.mail-pwa-selected.is-empty-hint {
display: block;
padding: 12px 12px 0;
}
.mail-pwa-hint {
display: block;
padding: 10px 12px;
border-radius: 12px;
border: 1px dashed var(--line);
background: var(--surface-2);
font-size: 12px; color: var(--faint); line-height: 1.4;
}
.mail-pwa-chip {
display: inline-flex; align-items: center; gap: 7px;
max-width: 100%;
padding: 5px 8px 5px 5px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text);
font-size: 12px; font-weight: 650;
box-shadow: 0 1px 2px rgba(47,107,255,.06);
}
.mail-pwa-chip img {
width: 22px; height: 22px; border-radius: 7px; object-fit: cover; background: var(--surface);
}
.mail-pwa-chip span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;
}
button.mail-pwa-chip-x,
.mail-pwa-chip-x {
appearance: none; border: 0;
width: 18px; height: 18px; min-height: 0; padding: 0;
border-radius: 50%;
background: var(--surface); color: var(--muted);
cursor: pointer; font-size: 13px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
button.mail-pwa-chip-x:hover,
.mail-pwa-chip-x:hover {
background: var(--acc-soft); color: var(--acc);
}
.mail-pwa-bar {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
}
.mail-pwa-search {
flex: 1 1 auto;
min-width: 0;
height: 40px;
}
.mail-pwa-acts {
display: flex; align-items: center; gap: 2px; flex: none;
}
button.mail-pwa-link,
.mail-pwa-link {
appearance: none; border: 0; background: transparent;
height: 34px; min-height: 0; padding: 0 10px;
border-radius: 10px;
color: var(--acc); font: inherit; font-size: 12px; font-weight: 700;
cursor: pointer;
}
button.mail-pwa-link:hover,
.mail-pwa-link:hover {
background: var(--acc-soft); color: var(--acc);
}
.mail-pwa-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
max-height: 280px;
min-height: 120px;
overflow: auto;
padding: 0 12px 12px;
}
.mail-pwa-list:has(.mail-pwa-empty) {
grid-template-columns: 1fr;
min-height: 140px;
}
button.mail-pwa-row,
.mail-pwa-row {
display: flex; align-items: center; gap: 10px;
width: 100%; height: auto; min-height: 58px;
text-align: left; white-space: normal;
appearance: none; border: 1px solid var(--line);
background: var(--surface);
padding: 10px;
border-radius: 14px;
cursor: pointer; font: inherit; font-weight: 400; color: var(--text);
box-shadow: none;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
button.mail-pwa-row:hover,
.mail-pwa-row:hover {
background: var(--surface); color: var(--text);
border-color: #c9d5f5;
transform: translateY(-1px);
}
button.mail-pwa-row.is-on,
button.mail-pwa-row.is-on:hover,
.mail-pwa-row.is-on {
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border-color: #9eb6ff;
color: var(--text);
box-shadow: 0 6px 16px rgba(47,107,255,.08);
}
.mail-pwa-row img {
width: 36px; height: 36px; border-radius: 10px; object-fit: cover;
background: var(--surface); flex: none;
box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.mail-pwa-row > div {
flex: 1; min-width: 0;
}
.mail-pwa-row b {
display: block; font-size: 13px; font-weight: 750;
letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-pwa-row em {
display: block; font-style: normal; font-size: 11px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-top: 1px;
}
.mail-pwa-check {
width: 20px; height: 20px; border-radius: 7px; flex: none;
border: 1.5px solid var(--line-strong); background: var(--surface);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mail-pwa-row:hover .mail-pwa-check {
border-color: #9db6ff;
box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}
.mail-pwa-row.is-on .mail-pwa-check {
border-color: var(--acc);
background: var(--acc);
box-shadow: 0 4px 10px rgba(47, 107, 255, .28);
}
.mail-pwa-row.is-on .mail-pwa-check::after {
content: "";
width: 9px; height: 5px;
border-left: 2px solid var(--line); border-bottom: 2px solid var(--line);
transform: rotate(-45deg) translateY(-1px);
}
.mail-pwa-empty {
grid-column: 1 / -1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
padding: 28px 16px;
text-align: center;
border-radius: 14px;
border: 1px dashed var(--line);
background: var(--surface-2);
font-size: 13px; color: var(--faint);
}
.mail-pwa-empty b {
font-size: 14px; font-weight: 750; color: var(--muted);
}
@media (max-width: 720px) {
.mail-pwa-list { grid-template-columns: 1fr; }
.mail-pwa-bar { flex-wrap: wrap; }
.mail-pwa-acts { width: 100%; justify-content: flex-end; }
}
.mail-card-icos {
display: flex; align-items: center; flex: none;
}
.mail-card-icos img,
.mail-card-ico-ph,
.mail-card-ico-more {
width: 36px; height: 36px; border-radius: 10px;
border: 2px solid var(--line);
box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.mail-card-icos img {
object-fit: cover; background: var(--surface);
}
.mail-card-ico-ph {
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(145deg, var(--surface), #c7d4f8);
color: var(--acc-hover); font-size: 13px; font-weight: 800;
}
.mail-card-icos img + img,
.mail-card-icos img + .mail-card-ico-ph,
.mail-card-icos .mail-card-ico-ph + img,
.mail-card-icos .mail-card-ico-ph + .mail-card-ico-ph,
.mail-card-icos img + .mail-card-ico-more,
.mail-card-icos .mail-card-ico-ph + .mail-card-ico-more {
margin-left: -10px;
}
.mail-card-ico-more {
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); color: var(--muted);
font-size: 11px; font-weight: 750;
}
.mail-toggle-card {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
margin-top: 14px; padding: 14px;
border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2);
}
.mail-toggle-card b { display: block; font-size: 13px; font-weight: 750; }
.mail-toggle-card span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.mail-mode-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px; margin-bottom: 14px;
}
button.mail-mode-card,
.mail-mode-card {
appearance: none; border: 1px solid var(--line); cursor: pointer;
height: auto; min-height: 118px; width: 100%;
display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
gap: 0; white-space: normal; text-align: left;
padding: 14px 14px 12px;
border-radius: 16px; background: var(--surface-2);
font: inherit; font-weight: 400; color: var(--text);
box-shadow: none; transition: .18s ease;
}
button.mail-mode-card:hover,
.mail-mode-card:hover {
border-color: #c9d5f5; background: var(--surface); color: var(--text);
transform: translateY(-1px); filter: none;
}
button.mail-mode-card.is-on,
button.mail-mode-card.is-on:hover,
.mail-mode-card.is-on {
border-color: #9eb6ff;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
color: var(--text);
box-shadow: 0 8px 20px rgba(47,107,255,.1);
}
.mail-mode-ico {
display: inline-flex; width: 32px; height: 32px; border-radius: 10px;
align-items: center; justify-content: center;
background: var(--surface); color: var(--muted);
margin-bottom: 10px;
}
.mail-mode-card.is-on .mail-mode-ico {
background: var(--acc); color: #fff;
}
.mail-mode-card b {
display: block; font-size: 14px; font-weight: 750;
letter-spacing: -.01em; margin-bottom: 4px; color: var(--text);
}
.mail-mode-card > span:last-child {
display: block; font-size: 12px; color: var(--muted); line-height: 1.35;
font-weight: 500;
}
.mail-mode-setup {
border: 1px solid var(--line);
background: var(--surface-2);
border-radius: 14px;
padding: 14px;
}
.mail-mode-fields {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
align-items: end;
}
.mail-mode-fields[hidden],
.mail-mode-setup[hidden] { display: none !important; }
.mail-mode-empty b,
.mail-mode-note b,
.mail-tz-note b {
display: block; font-size: 13px; font-weight: 750; color: var(--text);
}
.mail-mode-empty p,
.mail-mode-note p,
.mail-tz-note p {
margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4;
}
.mail-mode-fields .field { margin: 0; min-width: 0; }
.mail-trigger-setup {
padding: 10px 12px;
background: var(--surface-2);
border-color: var(--line);
}
.mail-trigger-flow {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 8px 10px;
}
.mail-trigger-step {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1 1 200px;
}
.mail-trigger-delay,
.mail-trigger-when {
flex: 1 1 260px;
}
.mail-trig-timing {
display: flex;
gap: 3px;
padding: 3px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--line);
width: fit-content;
max-width: 100%;
}
.mail-trig-timing-btn {
border: 0 !important;
background: transparent !important;
height: 30px !important;
padding: 0 12px !important;
border-radius: 8px !important;
font: inherit !important;
font-size: 12px !important;
font-weight: 550 !important;
color: var(--muted) !important;
cursor: pointer;
box-shadow: none !important;
filter: none !important;
}
button.mail-trig-timing-btn:hover {
color: var(--text) !important;
background: rgba(255,255,255,.65) !important;
filter: none !important;
}
.mail-trig-timing-btn.is-on {
background: var(--surface) !important;
color: var(--text) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
}
.mail-trig-delay-pane {
margin-top: 8px;
}
.mail-trig-weekly-pane {
margin-top: 10px;
}
.mail-trig-weekly-card,
.mail-trig-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.mail-trig-field {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.mail-trig-field-lab,
.mail-trig-lab {
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--muted);
line-height: 1.2;
}
.mail-trig-days {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.mail-trig-day {
width: 36px;
height: 32px;
padding: 0 !important;
border-radius: 9px !important;
border: 1px solid var(--line) !important;
background: var(--surface) !important;
color: var(--muted) !important;
font: inherit !important;
font-size: 12px !important;
font-weight: 650 !important;
box-shadow: none !important;
filter: none !important;
cursor: pointer;
}
button.mail-trig-day:hover {
color: var(--text) !important;
border-color: var(--line-strong) !important;
background: var(--surface) !important;
filter: none !important;
}
.mail-trig-day.is-on {
background: var(--acc) !important;
color: #fff !important;
border-color: var(--acc) !important;
}
button.mail-trig-day.is-on:hover {
background: var(--acc-hover) !important;
border-color: var(--acc-hover) !important;
color: #fff !important;
filter: none !important;
}
.mail-trig-time-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.mail-trig-time-row .mail-sched-pick {
flex: 0 1 148px;
}
.mail-trig-time-row .mail-sched-pick select,
.mail-trig-time-row .mail-sched-pick .csel-btn {
height: 36px !important;
min-height: 36px;
font-size: 14px !important;
font-weight: 700;
}
.mail-trig-tz-badge {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 9px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line);
color: var(--text);
font-size: 11px;
font-weight: 650;
letter-spacing: .01em;
white-space: nowrap;
}
.mail-trig-time-help,
.mail-trig-help {
margin: 0;
padding: 10px 11px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--line);
font-size: 12px;
font-weight: 500;
color: var(--text);
line-height: 1.45;
}
.mail-trig-help b {
color: var(--text);
font-weight: 700;
}
.mail-trigger-result.is-weekly-hidden {
display: none !important;
}
.mail-trigger-step > label {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
color: var(--muted);
line-height: 1.2;
}
.mail-trigger-ico {
flex: none;
width: 18px; height: 18px;
border-radius: 6px;
display: inline-grid; place-items: center;
background: var(--surface);
color: var(--acc);
}
.mail-trigger-ico svg { display: block; }
.mail-trigger-step > select,
.mail-trigger-step .csel {
width: 100%;
}
.mail-trigger-step > select,
.mail-trigger-step .csel-btn {
height: 36px;
min-height: 36px;
border-radius: 10px;
font-size: 13px;
}
.mail-trigger-join {
flex: 0 0 auto;
align-self: flex-end;
height: 36px;
display: grid;
place-items: center;
color: var(--faint);
font-size: 16px;
font-weight: 600;
line-height: 1;
padding: 0 2px;
margin-bottom: 0;
}
.mail-trigger-result {
margin: 8px 0 0;
padding: 0;
border: 0;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 550;
line-height: 1.35;
}
.mail-delay-row {
display: flex;
align-items: stretch;
gap: 6px;
width: 100%;
max-width: 100%;
}
.mail-delay-row > input[type="number"] {
box-sizing: border-box;
width: 64px !important;
min-width: 64px;
max-width: 64px;
flex: 0 0 64px;
height: 36px;
padding: 0 8px;
border-radius: 10px;
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text);
font: inherit;
font-size: 13.5px;
font-weight: 750;
font-variant-numeric: tabular-nums;
text-align: center;
}
.mail-delay-row > input[type="number"]:focus {
outline: none;
border-color: #8eafff;
box-shadow: 0 0 0 3px rgba(47,107,255,.16);
}
.mail-delay-row > .csel,
.mail-delay-row > select {
flex: 1 1 auto;
width: auto;
min-width: 0;
max-width: none;
}
.mail-delay-row > select,
.mail-delay-row .csel-btn {
height: 36px;
min-height: 36px;
border-radius: 10px;
font-size: 13px;
}
.mail-delay-hint { margin: 6px 0 0; }
@media (max-width: 560px) {
.mail-trigger-join { display: none; }
.mail-trigger-step,
.mail-trigger-delay,
.mail-trigger-when { flex: 1 1 100%; }
}
.mail-sched {
display: grid; grid-template-columns: minmax(160px, .9fr) 1.3fr;
gap: 12px; align-items: start;
}
.mail-sched .field { margin: 0; }
.mail-sched-pick {
display: flex; align-items: center; gap: 8px;
}
.mail-sched-pick select {
flex: 1; min-width: 0; height: 42px;
font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
text-align: center;
}
.mail-sched-colon {
font-size: 20px; font-weight: 750; color: var(--muted); line-height: 1;
}
.mail-tz-note {
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.mail-tz-badge {
display: inline-flex; align-items: center;
margin-bottom: 6px;
padding: 3px 8px; border-radius: 999px;
background: var(--acc); color: #fff;
font-size: 10px; font-weight: 750; letter-spacing: .04em;
text-transform: uppercase;
}
@media (max-width: 720px) {
.mail-sched { grid-template-columns: 1fr; }
}
.mail-lang-bar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 12px;
}
.mail-lang-chips {
display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0;
}
button.mail-lang-chip,
.mail-lang-chip {
appearance: none; border: 1px solid var(--line);
height: auto; min-height: 32px; padding: 5px 10px;
border-radius: 999px; background: var(--surface);
color: var(--muted); font: inherit; font-size: 12px; font-weight: 650;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
button.mail-lang-chip:hover,
.mail-lang-chip:hover {
border-color: #c9d5f5; color: var(--text); background: var(--surface);
}
button.mail-lang-chip.is-on,
button.mail-lang-chip.is-on:hover,
.mail-lang-chip.is-on {
border-color: #9eb6ff;
background: var(--acc-soft);
color: var(--acc);
}
.mail-lang-chip .mail-lang-def {
font-size: 10px; font-weight: 750; letter-spacing: .03em;
text-transform: uppercase; color: #fff;
background: var(--acc); border-radius: 999px; padding: 1px 6px;
}
button.mail-lang-chip-x,
.mail-lang-chip-x {
appearance: none; border: 0; background: transparent;
width: 16px; height: 16px; min-height: 0; padding: 0;
border-radius: 50%; color: inherit; cursor: pointer;
font-size: 13px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
button.mail-lang-chip-x:hover { background: var(--surface); color: var(--acc); }
button.mail-lang-add,
.mail-lang-add {
appearance: none; border: 1px dashed #c5d0ef;
height: 32px; min-height: 0; padding: 0 12px;
border-radius: 999px; background: transparent;
color: var(--acc); font: inherit; font-size: 12px; font-weight: 700;
cursor: pointer; flex: none;
}
button.mail-lang-add:hover,
.mail-lang-add:hover {
background: var(--acc-soft); border-style: solid; color: var(--acc);
}
.mail-trans-bar {
display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px;
margin: -2px 0 12px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background:
radial-gradient(80% 120% at 0% 0%, rgba(47,107,255,.08), transparent 55%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.mail-trans-bar.is-locked {
opacity: .92;
}
.mail-trans-ico {
width: 36px; height: 36px; border-radius: 11px; flex: none;
display: grid; place-items: center;
background: var(--surface); color: var(--acc);
border: 1px solid rgba(47,107,255,.16);
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.mail-trans-copy {
flex: 1 1 180px;
min-width: 160px;
}
.mail-trans-copy b {
display: block;
font-size: 13px; font-weight: 750; color: var(--text);
letter-spacing: -.01em;
}
.mail-trans-copy p {
margin: 2px 0 0;
font-size: 11.5px; line-height: 1.35; color: var(--muted);
}
.mail-trans-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-left: auto;
flex-wrap: wrap;
}
.mail-trans-actions select,
.mail-trans-actions .csel {
flex: 0 0 148px;
width: 148px;
min-width: 148px;
max-width: 148px;
}
.mail-trans-bar select {
height: 36px; min-height: 36px;
padding: 0 32px 0 12px;
font-size: 12.5px; font-weight: 600;
}
.mail-trans-bar .csel-btn {
height: 36px; min-height: 36px;
font-size: 12.5px;
}
.mail-trans-bar.is-locked .mail-trans-actions select,
.mail-trans-bar.is-locked .mail-trans-actions .csel {
opacity: .55;
pointer-events: none;
}
button.mail-trans-btn,
.mail-trans-btn {
appearance: none; border: 0;
height: 36px; min-height: 36px; padding: 0 16px;
border-radius: 10px;
background: var(--acc); color: #fff;
font: inherit; font-size: 12.5px; font-weight: 700;
cursor: pointer; flex: none; white-space: nowrap;
box-shadow: 0 1px 2px rgba(47, 107, 255, .22);
}
button.mail-trans-btn:hover,
.mail-trans-btn:hover {
background: var(--acc-hover); color: #fff;
}
button.mail-trans-btn:disabled,
.mail-trans-btn:disabled {
opacity: .55; cursor: not-allowed;
box-shadow: none;
}
button.mail-trans-btn.is-busy,
.mail-trans-btn.is-busy {
cursor: wait;
}
@media (max-width: 720px) {
.mail-trans-actions {
width: 100%;
margin-left: 0;
}
.mail-trans-actions select,
.mail-trans-actions .csel {
flex: 1 1 auto;
width: auto;
min-width: 0;
max-width: none;
}
.mail-trans-btn { flex: 1 1 auto; }
}
.mail-lang-note {
margin: 0 0 14px;
font-size: 12px; color: #5d6b8a; line-height: 1.4;
}
#mailLangModal {
z-index: 260;
align-items: center; justify-content: center;
background: rgba(15, 23, 42, .45);
}
#mailLangModal:not(.hidden) { display: flex !important; }
#mailLangModal .mail-lang-card {
width: min(440px, calc(100vw - 32px));
max-height: min(88vh, 640px);
overflow: visible;
}
.mpick { position: relative; width: 100%; }
button.mpick-btn,
.mpick-btn {
appearance: none; border: 1px solid var(--line);
width: 100%; height: 42px; min-height: 42px;
padding: 0 12px; border-radius: 12px;
background: var(--surface); color: var(--text);
font: inherit; font-size: 14px; font-weight: 550;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
cursor: pointer; box-shadow: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
button.mpick-btn:hover,
.mpick-btn:hover {
border-color: #c5d0ef; background: var(--surface); color: var(--text);
}
.mpick.is-open .mpick-btn {
border-color: #9eb6ff;
box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
.mpick-label {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-align: left; flex: 1; min-width: 0;
}
.mpick-label.is-ph { color: var(--faint); font-weight: 500; }
.mpick-btn svg {
flex: none; color: var(--muted);
transition: transform .15s ease;
}
.mpick.is-open .mpick-btn svg { transform: rotate(180deg); color: var(--acc); }
.mpick-menu {
position: absolute; left: 0; right: 0; top: calc(100% + 6px);
z-index: 5;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
overflow: hidden;
}
.mpick-menu[hidden] { display: none !important; }
.mpick-menu .mpick-search,
.mpick-menu .mail-search {
width: auto;
margin: 8px 8px 0;
height: 36px;
}
.mpick-list {
max-height: 240px; overflow: auto;
padding: 6px;
}
/* Div options — avoid global button { height/background } crushing the list */
.mpick-opt {
border: 0; background: transparent;
width: 100%; height: auto; min-height: 40px;
padding: 8px 10px; border-radius: 10px;
display: flex; align-items: center; gap: 10px;
text-align: left; cursor: pointer;
font: inherit; font-weight: 400; color: var(--text);
box-shadow: none; box-sizing: border-box;
user-select: none;
}
.mpick-opt:hover {
background: var(--surface); color: var(--text);
}
.mpick-opt.is-on,
.mpick-opt.is-on:hover {
background: var(--acc-soft); color: var(--text);
}
.mpick-opt b {
display: block; flex: 1; min-width: 0;
font-size: 13px; font-weight: 650;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mpick-opt em {
flex: none; font-style: normal;
font-size: 11px; font-weight: 700; color: var(--faint);
font-variant-numeric: tabular-nums;
}
.mpick-opt.is-on em { color: var(--acc); }
.mpick-check {
width: 18px; height: 18px; border-radius: 6px; flex: none;
border: 1.5px solid var(--line-strong); background: var(--surface);
position: relative; box-sizing: border-box;
}
.mpick-opt.is-on .mpick-check {
border-color: var(--acc); background: var(--acc);
}
.mpick-opt.is-on .mpick-check::after {
content: "";
position: absolute; left: 5px; top: 2px;
width: 5px; height: 9px;
border: solid var(--line); border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.mpick-empty {
padding: 18px 12px; text-align: center;
font-size: 13px; color: var(--faint);
}
.mpick-tags {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 8px;
}
.mpick-tags[hidden] { display: none !important; }
.mpick-tag {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 8px 0 10px;
border-radius: 999px;
background: var(--acc-soft); color: var(--text);
font-size: 12px; font-weight: 650;
border: 1px solid rgba(47,107,255,.16);
}
.mpick-tag button {
appearance: none; border: 0; background: transparent;
width: 18px; height: 18px; padding: 0; margin: 0;
border-radius: 50%; cursor: pointer;
color: var(--muted); font-size: 14px; line-height: 1;
display: grid; place-items: center;
}
.mpick-tag button:hover { color: var(--text); background: rgba(15,23,42,.06); }
.mail-msg-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
align-items: start;
}
.mail-preview-hd {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 10px; margin-bottom: 10px;
}
.mail-preview-hd h3 {
margin: 0; font-size: 16px; font-weight: 750;
font-family: var(--font-display); letter-spacing: -.02em;
}
.mail-preview-hd p { margin: 3px 0 0; font-size: 12px; color: var(--faint); }
.mail-preview-card .push-device-wrap {
border: 0; background:
radial-gradient(70% 50% at 50% 100%, rgba(47,107,255,.08), transparent 70%),
linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
border-radius: 16px; padding: 12px 0 8px;
}
.mail-ed-foot {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 14px; padding: 12px 16px 16px;
border-top: 1px solid var(--line);
background: rgba(255,255,255,.65);
}
.push-pane-main { display: flex; flex-direction: column; gap: 0; }
.push-mailings-sec .met-sec-hd {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.push-pwa-mailings {
display: flex; flex-direction: column; gap: 12px;
min-height: 120px;
}
.push-pwa-mailings.mail-board { gap: 14px; }
.push-pwa-mailings .mail-row { cursor: default; }
.push-pwa-mailings .mail-row-edit { cursor: pointer; }
.push-mail-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; text-align: center;
padding: 36px 20px;
border: 1px dashed var(--line); border-radius: 16px;
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
}
.push-mail-empty b {
font-size: 15px; font-weight: 700; color: var(--text);
}
.push-mail-empty p {
margin: 0; max-width: 340px;
font-size: 13px; color: var(--muted); line-height: 1.45;
}
.push-mail-empty .mail-cta { margin-top: 6px; }
.push-pane-legacy { display: none !important; }
@media (max-width: 980px) {
.mail-msg-grid, .mail-split, .mail-mode-grid { grid-template-columns: 1fr; }
.mail-mode-fields { grid-template-columns: 1fr; }
.mail-steps { grid-template-columns: 1fr 1fr; }
}
/* ===================================================================
THEME TOGGLE (sun/moon in topbar)
=================================================================== */
.theme-toggle {
display: inline-grid; place-items: center;
width: 38px; height: 38px; margin-right: 8px;
border-radius: 12px; cursor: pointer;
background: var(--card); color: var(--muted);
border: 1px solid var(--line);
transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--acc); border-color: var(--acc); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .th-sun { display: none; }
.theme-toggle .th-moon { display: block; }
html[data-theme="dark"] .theme-toggle .th-sun { display: block; }
html[data-theme="dark"] .theme-toggle .th-moon { display: none; }
/* ===================================================================
DARK THEME — Pulse (deep charcoal, electric-violet glow)
Overrides tokens (covers everything using var()) + targeted fixes
for components that hard-code light colors.
=================================================================== */
html[data-theme="dark"] {
color-scheme: dark;
--bg: #15141b;
--card: #201f29;
--line: #343242;
--line-strong: #413f52;
--text: #f3f2f7;
--muted: #a3a1b4;
--faint: #7d7b8e;
--acc: #7c5cff;
--acc-hover: #9178ff;
--acc-soft: rgba(124, 92, 255, .16);
--surface: #201f29;
--surface-2: #26252f;
--ok: #37c98a;
--ok-bg: rgba(55, 201, 138, .14);
--warn: #e0a53e;
--warn-bg: rgba(224, 165, 62, .14);
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px rgba(0, 0, 0, .45);
}
/* surfaces / page background */
html[data-theme="dark"] body {
background:
radial-gradient(820px 420px at 8% -12%, rgba(124, 92, 255, .22), transparent 58%),
radial-gradient(680px 360px at 96% 0%, rgba(124, 92, 255, .08), transparent 52%),
var(--bg);
background-attachment: fixed;
color: var(--text);
}
/* topnav (hard-coded white gradient) */
html[data-theme="dark"] .topnav {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 100%);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 28px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
}
/* generic cards / panels that hard-code white or near-white bg */
html[data-theme="dark"] .card { background: var(--card); border-color: var(--line); }
/* form controls (date/number/text/select/textarea) */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
background-color: var(--surface-2);
border-color: var(--line);
color: var(--text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--faint); }
html[data-theme="dark"] option { background: var(--surface-2); color: var(--text); }
/* code / mono blocks */
html[data-theme="dark"] code,
html[data-theme="dark"] pre { background: var(--surface-2); color: #e7e3ff; border-color: var(--line); }
/* scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; border: 2px solid var(--line-strong); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--surface-2); }
|