ruslan
de278227ac
- index.html: store dropdown in topbar (switch without leaving page) - cabinet.html: store-cards with Активировать/Проверить, edit hidden in <details> - Removed 'Используется' button, active shown as green card + label - next=index param to return to main page after store switch - Brand name changed to WBfeed.ru across all templates Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1993 lines
49 KiB
CSS
1993 lines
49 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||
|
||
/* ─── Design tokens ──────────────────────────────────────────────── */
|
||
:root {
|
||
--wb: #CB11AB;
|
||
--wb-dark: #A00D87;
|
||
--wb-glow: rgba(203,17,171,0.2);
|
||
--wb-light: rgba(203,17,171,0.08);
|
||
|
||
--blue: #4F46E5;
|
||
--blue-dark: #3730A3;
|
||
--blue-light: rgba(79,70,229,0.08);
|
||
--blue-glow: rgba(79,70,229,0.22);
|
||
|
||
--green: #059669;
|
||
--green-bg: #ECFDF5;
|
||
--green-line: #6EE7B7;
|
||
|
||
--red: #DC2626;
|
||
--red-bg: #FEF2F2;
|
||
--red-line: #FECACA;
|
||
|
||
--amber: #D97706;
|
||
--amber-bg: #FFFBEB;
|
||
--amber-line: #FDE68A;
|
||
|
||
--star5: #F59E0B;
|
||
--star4: #84CC16;
|
||
--star3: #F97316;
|
||
--star2: #EF4444;
|
||
--star1: #DC2626;
|
||
|
||
--bg: #F3F4F8;
|
||
--card: #FFFFFF;
|
||
--text: #111827;
|
||
--muted: #6B7280;
|
||
--subtle: #9CA3AF;
|
||
--line: #E5E7EB;
|
||
--line-strong: #D1D5DB;
|
||
|
||
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
|
||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
|
||
--shadow: 0 4px 20px rgba(0,0,0,0.09);
|
||
--shadow-md: 0 8px 32px rgba(0,0,0,0.10);
|
||
--shadow-lg: 0 24px 64px rgba(0,0,0,0.13);
|
||
|
||
--r-xs: 6px;
|
||
--r-sm: 10px;
|
||
--r: 14px;
|
||
--r-lg: 20px;
|
||
--r-xl: 28px;
|
||
--r-full: 9999px;
|
||
|
||
--t: 0.18s ease;
|
||
|
||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ─── Reset ──────────────────────────────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
/* ─── Body ───────────────────────────────────────────────────────── */
|
||
body {
|
||
min-height: 100vh;
|
||
background:
|
||
radial-gradient(ellipse 1000px 600px at -5% -10%, rgba(203,17,171,0.07), transparent),
|
||
radial-gradient(ellipse 800px 500px at 105% 105%, rgba(79,70,229,0.08), transparent),
|
||
var(--bg);
|
||
background-attachment: fixed;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ─── Typography ─────────────────────────────────────────────────── */
|
||
h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
|
||
h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
|
||
h3 { font-size: 15px; font-weight: 600; }
|
||
|
||
p { color: var(--muted); }
|
||
a { color: var(--blue); text-decoration: none; transition: color var(--t); }
|
||
a:hover { color: var(--blue-dark); text-decoration: underline; }
|
||
|
||
/* ─── Sticky topbar ──────────────────────────────────────────────── */
|
||
.topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 200;
|
||
background: rgba(255,255,255,0.86);
|
||
backdrop-filter: blur(18px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(180%);
|
||
border-bottom: 1px solid rgba(229,231,235,0.7);
|
||
box-shadow: 0 1px 16px rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.topbar__inner {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.topbar__brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
text-decoration: none;
|
||
flex-shrink: 0;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.topbar__brand:hover { text-decoration: none; }
|
||
|
||
.topbar__logo {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: var(--r-sm);
|
||
background: linear-gradient(135deg, #D914B5 0%, var(--wb-dark) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.02em;
|
||
box-shadow: 0 4px 14px var(--wb-glow);
|
||
flex-shrink: 0;
|
||
}
|
||
.topbar__logo-img {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
object-fit: contain;
|
||
flex-shrink: 0;
|
||
background: white;
|
||
padding: 4px;
|
||
box-shadow: 0 2px 10px rgba(203,17,171,0.3), 0 0 0 2px rgba(203,17,171,0.12);
|
||
}
|
||
|
||
.topbar__name {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
letter-spacing: -0.2px;
|
||
}
|
||
|
||
.topbar__nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
flex: 1;
|
||
}
|
||
|
||
.topbar__link {
|
||
padding: 6px 14px;
|
||
border-radius: var(--r-full);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
transition: all var(--t);
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
.topbar__link:hover {
|
||
color: var(--text);
|
||
background: var(--line);
|
||
}
|
||
|
||
.topbar__link.active {
|
||
color: var(--blue);
|
||
background: var(--blue-light);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.topbar__user {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-shrink: 0;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.topbar__username {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.btn-ghost {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 6px 14px;
|
||
border-radius: var(--r-sm);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
background: transparent;
|
||
border: 1.5px solid var(--line);
|
||
cursor: pointer;
|
||
transition: all var(--t);
|
||
text-decoration: none !important;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.btn-ghost:hover {
|
||
background: var(--line);
|
||
color: var(--text);
|
||
border-color: var(--line-strong);
|
||
}
|
||
|
||
/* ─── Page ───────────────────────────────────────────────────────── */
|
||
.page {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 28px 24px 56px;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.page-header p {
|
||
margin-top: 5px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* ─── Buttons ────────────────────────────────────────────────────── */
|
||
button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
border: none;
|
||
border-radius: var(--r-sm);
|
||
padding: 9px 18px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
transition: all var(--t);
|
||
white-space: nowrap;
|
||
line-height: 1;
|
||
background: linear-gradient(180deg, #5D53F5 0%, var(--blue-dark) 100%);
|
||
color: #fff;
|
||
box-shadow: 0 4px 14px var(--blue-glow);
|
||
}
|
||
|
||
button:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 6px 22px var(--blue-glow);
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
button:active {
|
||
transform: translateY(0);
|
||
filter: brightness(0.98);
|
||
}
|
||
|
||
button.secondary {
|
||
background: var(--line);
|
||
color: var(--text);
|
||
box-shadow: none;
|
||
}
|
||
|
||
button.secondary:hover {
|
||
background: var(--line-strong);
|
||
box-shadow: none;
|
||
filter: none;
|
||
}
|
||
|
||
button.toggle-btn--on {
|
||
background: var(--green-bg);
|
||
color: var(--green);
|
||
border: 2px solid var(--green-line);
|
||
box-shadow: none;
|
||
}
|
||
|
||
button.toggle-btn--on:hover {
|
||
background: var(--green);
|
||
color: white;
|
||
box-shadow: 0 4px 16px rgba(5,150,105,0.3);
|
||
filter: none;
|
||
}
|
||
|
||
button.toggle-btn--off {
|
||
background: var(--line);
|
||
color: var(--muted);
|
||
border: 2px solid var(--line-strong);
|
||
box-shadow: none;
|
||
}
|
||
|
||
button.toggle-btn--off:hover {
|
||
background: var(--blue);
|
||
color: white;
|
||
border-color: var(--blue);
|
||
box-shadow: 0 4px 16px var(--blue-glow);
|
||
filter: none;
|
||
}
|
||
|
||
/* ─── Alerts ─────────────────────────────────────────────────────── */
|
||
.alert {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 12px 16px;
|
||
border-radius: var(--r);
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
border: 1px solid var(--amber-line);
|
||
background: var(--amber-bg);
|
||
color: var(--amber);
|
||
}
|
||
|
||
.alert-error {
|
||
background: var(--red-bg);
|
||
border-color: var(--red-line);
|
||
color: var(--red);
|
||
}
|
||
|
||
.alert-success {
|
||
background: var(--green-bg);
|
||
border-color: var(--green-line);
|
||
color: var(--green);
|
||
}
|
||
|
||
/* ─── Badges ─────────────────────────────────────────────────────── */
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 3px 10px;
|
||
border-radius: var(--r-full);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
background: var(--blue-light);
|
||
color: var(--blue);
|
||
}
|
||
|
||
.badge-green {
|
||
background: var(--green-bg);
|
||
color: var(--green);
|
||
}
|
||
|
||
.badge-inactive {
|
||
background: var(--red-bg);
|
||
color: var(--red);
|
||
}
|
||
|
||
.badge-admin {
|
||
background: var(--wb-light);
|
||
color: var(--wb-dark);
|
||
}
|
||
|
||
/* ─── Card ───────────────────────────────────────────────────────── */
|
||
.card {
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r-lg);
|
||
padding: 20px 22px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: box-shadow var(--t);
|
||
}
|
||
|
||
/* ─── Controls / star filter ─────────────────────────────────────── */
|
||
.controls {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.controls-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r-lg);
|
||
padding: 18px 22px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.star-filter {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.star-filter-label {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.star-pill input[type="checkbox"] { display: none; }
|
||
|
||
.star-pill label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 6px 14px;
|
||
border-radius: var(--r-full);
|
||
border: 1.5px solid var(--line);
|
||
background: #FAFBFC;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all var(--t);
|
||
user-select: none;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.star-pill label:hover {
|
||
border-color: var(--line-strong);
|
||
background: var(--card);
|
||
color: var(--text);
|
||
}
|
||
|
||
.star-pill[data-star="5"] input:checked + label { border-color: var(--star5); background: rgba(245,158,11,0.09); color: #92400E; font-weight: 600; }
|
||
.star-pill[data-star="4"] input:checked + label { border-color: var(--star4); background: rgba(132,204,22,0.09); color: #3F6212; font-weight: 600; }
|
||
.star-pill[data-star="3"] input:checked + label { border-color: var(--star3); background: rgba(249,115,22,0.09); color: #9A3412; font-weight: 600; }
|
||
.star-pill[data-star="2"] input:checked + label { border-color: var(--star2); background: rgba(239,68,68,0.09); color: #991B1B; font-weight: 600; }
|
||
.star-pill[data-star="1"] input:checked + label { border-color: var(--star1); background: rgba(220,38,38,0.09); color: #7F1D1D; font-weight: 600; }
|
||
|
||
.control-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ─── Auto-reply section ─────────────────────────────────────────── */
|
||
.auto-reply {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.auto-reply__info { flex: 1; }
|
||
|
||
.auto-reply__title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.auto-reply__info p {
|
||
font-size: 13px;
|
||
margin: 0;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
display: inline-block;
|
||
}
|
||
|
||
.status-dot--green {
|
||
background: var(--green);
|
||
box-shadow: 0 0 0 0 rgba(5,150,105,0.5);
|
||
animation: pulse-green 2s infinite;
|
||
}
|
||
|
||
.status-dot--gray { background: var(--subtle); }
|
||
|
||
@keyframes pulse-green {
|
||
0% { box-shadow: 0 0 0 0 rgba(5,150,105,0.5); }
|
||
70% { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
|
||
}
|
||
|
||
.countdown-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 12px;
|
||
background: var(--blue-light);
|
||
border-radius: var(--r-full);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--blue);
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* ─── Auto-reply pools ───────────────────────────────────────────── */
|
||
.pool-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.pool-block { display: flex; flex-direction: column; gap: 7px; }
|
||
|
||
.pool-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.pool-item {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 6px;
|
||
align-items: start;
|
||
}
|
||
|
||
.pool-item textarea {
|
||
padding: 7px 10px;
|
||
font-size: 13px;
|
||
resize: vertical;
|
||
min-height: 58px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.pool-item .pool-remove-btn {
|
||
min-width: 72px;
|
||
padding: 6px 10px;
|
||
font-size: 12px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.pool-add-btn {
|
||
align-self: flex-start;
|
||
padding: 6px 10px;
|
||
font-size: 12px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.pool-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.pool-save-status {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.pool-save-status.ok { color: var(--green); }
|
||
.pool-save-status.warn { color: var(--amber); }
|
||
.pool-save-status.err { color: var(--red); }
|
||
|
||
.pool-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
|
||
.star-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 2px 8px;
|
||
border-radius: var(--r-full);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.star-chip--5 { background: rgba(245,158,11,0.12); color: #92400E; }
|
||
.star-chip--4 { background: rgba(132,204,22,0.12); color: #3F6212; }
|
||
|
||
/* ─── Form inputs ────────────────────────────────────────────────── */
|
||
label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text);
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="password"],
|
||
textarea {
|
||
width: 100%;
|
||
padding: 10px 14px;
|
||
border-radius: var(--r-sm);
|
||
border: 1.5px solid var(--line);
|
||
font-family: inherit;
|
||
font-size: 14px;
|
||
color: var(--text);
|
||
background: #FAFBFC;
|
||
transition: border-color var(--t), box-shadow var(--t), background var(--t);
|
||
outline: none;
|
||
resize: vertical;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
input[type="text"]:focus,
|
||
input[type="password"]:focus,
|
||
textarea:focus {
|
||
border-color: var(--blue);
|
||
background: white;
|
||
box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
|
||
}
|
||
|
||
/* ─── Logs table ─────────────────────────────────────────────────── */
|
||
.logs-table-wrap {
|
||
overflow-x: auto;
|
||
border-radius: var(--r-sm);
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.logs-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.logs-table thead tr {
|
||
background: #F9FAFB;
|
||
}
|
||
|
||
.logs-table th {
|
||
padding: 10px 14px;
|
||
text-align: left;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
border-bottom: 1px solid var(--line);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.logs-table td {
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid #F3F4F6;
|
||
vertical-align: top;
|
||
color: var(--text);
|
||
}
|
||
|
||
.logs-table tbody tr:hover { background: rgba(79,70,229,0.02); }
|
||
.logs-table tbody tr:last-child td { border-bottom: none; }
|
||
|
||
.log-status--sent { color: var(--green); font-weight: 600; }
|
||
.log-status--skip { color: var(--amber); font-weight: 600; }
|
||
.log-status--error { color: var(--red); font-weight: 600; }
|
||
|
||
/* ─── Review cards ───────────────────────────────────────────────── */
|
||
.reviews { display: flex; flex-direction: column; gap: 12px; }
|
||
|
||
.review {
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r-lg);
|
||
padding: 18px 20px;
|
||
box-shadow: var(--shadow-xs);
|
||
border-left: 4px solid var(--line);
|
||
transition: box-shadow var(--t), transform var(--t);
|
||
}
|
||
|
||
.review:hover {
|
||
box-shadow: var(--shadow);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.review[data-rating="5"] { border-left-color: var(--star5); }
|
||
.review[data-rating="4"] { border-left-color: var(--star4); }
|
||
.review[data-rating="3"] { border-left-color: var(--star3); }
|
||
.review[data-rating="2"] { border-left-color: var(--star2); }
|
||
.review[data-rating="1"] { border-left-color: var(--star1); }
|
||
|
||
.review__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.review__product {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
|
||
.rating {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
padding: 2px 9px;
|
||
border-radius: var(--r-full);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
margin-left: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rating--5 { background: rgba(245,158,11,0.12); color: #92400E; }
|
||
.rating--4 { background: rgba(132,204,22,0.12); color: #3F6212; }
|
||
.rating--3 { background: rgba(249,115,22,0.1); color: #9A3412; }
|
||
.rating--2 { background: rgba(239,68,68,0.1); color: #991B1B; }
|
||
.rating--1 { background: rgba(220,38,38,0.1); color: #7F1D1D; }
|
||
|
||
.review__meta {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 3px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.review__text {
|
||
font-size: 14px;
|
||
color: var(--text);
|
||
line-height: 1.65;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.details { margin: 0 0 12px; }
|
||
.details dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--subtle); margin-top: 8px; }
|
||
.details dd { font-size: 14px; color: var(--text); margin: 2px 0 0; }
|
||
|
||
.answer {
|
||
padding: 10px 14px;
|
||
background: rgba(79,70,229,0.05);
|
||
border-left: 3px solid var(--blue);
|
||
border-radius: 0 var(--r-sm) var(--r-sm) 0;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.answer strong { color: var(--blue); }
|
||
|
||
.no-answer {
|
||
font-size: 13px;
|
||
color: var(--subtle);
|
||
font-style: italic;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.inline-reply { margin-top: 4px; }
|
||
|
||
.inline-reply summary {
|
||
cursor: pointer;
|
||
color: var(--blue);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
padding: 6px 0;
|
||
user-select: none;
|
||
list-style: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.inline-reply summary::after {
|
||
content: '›';
|
||
font-size: 16px;
|
||
transition: transform var(--t);
|
||
}
|
||
|
||
.inline-reply[open] summary::after { transform: rotate(90deg); }
|
||
|
||
.inline-reply summary:hover { color: var(--blue-dark); }
|
||
|
||
.inline-reply form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
/* ─── Reply form ─────────────────────────────────────────────────── */
|
||
.reply-form {
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r-lg);
|
||
padding: 20px 22px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--shadow-sm);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.reply-form > label {
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.reply-form textarea { min-height: 100px; }
|
||
|
||
.reply-form__actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.reply-form__actions span {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* ─── Summary ────────────────────────────────────────────────────── */
|
||
.summary { margin: 20px 0 12px; }
|
||
.summary h2 { margin-bottom: 4px; }
|
||
.summary p { font-size: 14px; }
|
||
|
||
/* ─── Cabinet ────────────────────────────────────────────────────── */
|
||
.cabinet-section {
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--r-lg);
|
||
padding: 20px 22px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.cabinet-section h2 { margin-bottom: 16px; }
|
||
|
||
.cabinet-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.token-list { list-style: none; padding: 0; margin: 0; }
|
||
|
||
.token-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.token-item:last-child { border-bottom: none; }
|
||
|
||
.token-main { flex: 1; min-width: 0; }
|
||
|
||
.token-name {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.token-owner { font-size: 13px; color: var(--muted); font-weight: 400; }
|
||
|
||
.token-edit-form {
|
||
margin-top: 14px;
|
||
padding-top: 14px;
|
||
border-top: 1px dashed var(--line-strong);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.token-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.token-actions button { font-size: 13px; padding: 7px 14px; }
|
||
|
||
/* ─── Auth legacy shell ──────────────────────────────────────────── */
|
||
.auth-shell {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
}
|
||
|
||
/* ─── Login split layout ─────────────────────────────────────────── */
|
||
.login-split {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.login-promo {
|
||
flex: 0 0 25%;
|
||
min-width: 260px;
|
||
background: linear-gradient(145deg, #3D0066 0%, #6B0FA8 45%, #CB11AB 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60px 48px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.login-promo::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 500px; height: 500px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.04);
|
||
top: -120px; right: -120px;
|
||
}
|
||
.login-promo::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 300px; height: 300px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.04);
|
||
bottom: -80px; left: -80px;
|
||
}
|
||
|
||
.login-promo__inner {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 480px;
|
||
}
|
||
|
||
.login-brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: rgba(255,255,255,0.12);
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
border-radius: 99px;
|
||
padding: 8px 20px 8px 8px;
|
||
margin-bottom: 36px;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.login-brand__icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||
overflow: hidden;
|
||
}
|
||
.login-brand__icon img {
|
||
width: 32px;
|
||
height: 32px;
|
||
object-fit: contain;
|
||
}
|
||
.login-brand__name {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
letter-spacing: -0.2px;
|
||
}
|
||
|
||
.login-promo__title {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
color: white;
|
||
line-height: 1.25;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.login-promo__sub {
|
||
font-size: 15px;
|
||
color: rgba(255,255,255,0.78);
|
||
line-height: 1.65;
|
||
margin-bottom: 36px;
|
||
}
|
||
|
||
.login-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 36px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
}
|
||
|
||
.login-features__item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
color: white;
|
||
}
|
||
|
||
.login-features__icon {
|
||
font-size: 20px;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.login-features__item strong {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
margin-bottom: 2px;
|
||
color: white;
|
||
}
|
||
|
||
.login-features__item span {
|
||
font-size: 13px;
|
||
color: rgba(255,255,255,0.7);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.login-price {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
background: rgba(255,255,255,0.12);
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
border-radius: 14px;
|
||
padding: 16px 22px;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.login-price__amount {
|
||
font-size: 2rem;
|
||
font-weight: 900;
|
||
color: white;
|
||
white-space: nowrap;
|
||
}
|
||
.login-price__amount span {
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.login-price__desc {
|
||
font-size: 13px;
|
||
color: rgba(255,255,255,0.75);
|
||
line-height: 1.5;
|
||
max-width: 200px;
|
||
}
|
||
|
||
.login-form-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 32px;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.login-form-title {
|
||
font-size: 1.3rem;
|
||
font-weight: 700;
|
||
margin-bottom: 22px;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* ─── Auth card ──────────────────────────────────────────────────── */
|
||
.auth-card {
|
||
width: 100%;
|
||
max-width: 440px;
|
||
background: rgba(255,255,255,0.97);
|
||
border: 1px solid rgba(229,231,235,0.9);
|
||
border-radius: var(--r-xl);
|
||
padding: 36px;
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.auth-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.auth-kicker-logo-img {
|
||
width: 36px;
|
||
height: 36px;
|
||
object-fit: contain;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.auth-kicker-text {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--wb-dark);
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.auth-card h1 { margin-bottom: 6px; }
|
||
|
||
.auth-subtitle {
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
margin-bottom: 26px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.auth-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.auth-form button {
|
||
width: 100%;
|
||
margin-top: 6px;
|
||
padding: 12px;
|
||
font-size: 15px;
|
||
border-radius: var(--r);
|
||
}
|
||
|
||
.auth-footer {
|
||
margin-top: 20px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
text-align: center;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.login-split { flex-direction: column; }
|
||
.login-promo { padding: 40px 24px; flex: none; }
|
||
.login-promo__title { font-size: 1.5rem; }
|
||
.login-form-wrap { flex: none; padding: 32px 20px; }
|
||
.login-price { flex-direction: column; gap: 8px; text-align: center; }
|
||
.login-price__desc { max-width: none; }
|
||
}
|
||
|
||
/* ─── Utility ────────────────────────────────────────────────────── */
|
||
.hint { font-size: 14px; color: var(--muted); }
|
||
.inline-form { margin: 0; }
|
||
.cabinet-link { display: none; }
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-header h2 { margin: 0; }
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 32px 16px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* ─── Mobile ─────────────────────────────────────────────────────── */
|
||
@media (max-width: 768px) {
|
||
.page { padding: 16px 16px 48px; }
|
||
h1 { font-size: 22px; }
|
||
h2 { font-size: 16px; }
|
||
|
||
.topbar__nav { display: none; }
|
||
.topbar__username { display: none; }
|
||
|
||
.pool-grid { grid-template-columns: 1fr; }
|
||
.pool-item { grid-template-columns: 1fr; }
|
||
.pool-item .pool-remove-btn { width: 100%; }
|
||
.pool-add-btn { width: 100%; }
|
||
|
||
.review__header { flex-direction: column; gap: 8px; }
|
||
.review__meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; }
|
||
|
||
.auto-reply { flex-direction: column; }
|
||
.token-item { flex-direction: column; }
|
||
.token-actions { flex-direction: row; width: 100%; }
|
||
|
||
.control-buttons { flex-direction: column; }
|
||
.control-buttons button { width: 100%; }
|
||
|
||
.reply-form__actions { flex-direction: column; align-items: flex-start; }
|
||
|
||
.logs-table { font-size: 12px; min-width: 700px; }
|
||
.logs-table th, .logs-table td { padding: 8px 10px; }
|
||
|
||
.auth-shell { align-items: flex-start; padding-top: 16px; }
|
||
.auth-card { padding: 24px 20px; border-radius: var(--r-lg); }
|
||
}
|
||
|
||
/* ─── Stats bar ──────────────────────────────────────────────────── */
|
||
.stats-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.stat-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 7px 16px;
|
||
border-radius: var(--r-full);
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
box-shadow: var(--shadow-xs);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.stat-value {
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.stat-chip--warn {
|
||
border-color: var(--red-line);
|
||
background: var(--red-bg);
|
||
}
|
||
.stat-chip--warn .stat-value { color: var(--red); }
|
||
|
||
.stat-chip--ok {
|
||
border-color: var(--green-line);
|
||
background: var(--green-bg);
|
||
}
|
||
.stat-chip--ok .stat-value { color: var(--green); }
|
||
|
||
/* ─── Bottom nav (mobile only) ───────────────────────────────────── */
|
||
.bottom-nav {
|
||
display: none;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 300;
|
||
background: rgba(255,255,255,0.92);
|
||
backdrop-filter: blur(18px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(180%);
|
||
border-top: 1px solid rgba(229,231,235,0.8);
|
||
box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
|
||
padding: 6px 8px env(safe-area-inset-bottom, 6px);
|
||
justify-content: space-around;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.bottom-nav__item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
flex: 1;
|
||
padding: 6px 4px;
|
||
border-radius: var(--r);
|
||
color: var(--subtle);
|
||
text-decoration: none !important;
|
||
transition: all var(--t);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
position: relative;
|
||
}
|
||
|
||
.bottom-nav__item:hover {
|
||
color: var(--muted);
|
||
background: var(--line);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.bottom-nav__item.active {
|
||
color: var(--blue);
|
||
background: var(--blue-light);
|
||
}
|
||
|
||
.bottom-nav__item svg {
|
||
width: 22px;
|
||
height: 22px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bottom-nav__badge {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: calc(50% - 18px);
|
||
min-width: 16px;
|
||
height: 16px;
|
||
padding: 0 4px;
|
||
border-radius: var(--r-full);
|
||
background: var(--red);
|
||
color: white;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 1;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.bottom-nav { display: flex; }
|
||
.page { padding-bottom: 88px !important; }
|
||
.auth-shell { padding-bottom: 16px; }
|
||
}
|
||
|
||
/* ─── Pool item editor ───────────────────────────────────────────── */
|
||
.pool-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.pool-item {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.pool-item-input {
|
||
flex: 1;
|
||
padding: 9px 12px;
|
||
border: 1.5px solid var(--line);
|
||
border-radius: var(--r-sm);
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
background: #FAFBFC;
|
||
color: var(--text);
|
||
transition: border-color var(--t), box-shadow var(--t);
|
||
outline: none;
|
||
width: 100%;
|
||
}
|
||
|
||
.pool-item-input:focus {
|
||
border-color: var(--blue);
|
||
background: white;
|
||
box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
|
||
}
|
||
|
||
.btn-delete-item {
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
border-radius: var(--r-sm);
|
||
background: var(--red-bg);
|
||
color: var(--red);
|
||
border: 1px solid var(--red-line);
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: none;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.btn-delete-item:hover {
|
||
background: var(--red);
|
||
color: white;
|
||
border-color: var(--red);
|
||
transform: none;
|
||
box-shadow: none;
|
||
filter: none;
|
||
}
|
||
|
||
.btn-add-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 7px 14px;
|
||
border-radius: var(--r-sm);
|
||
background: transparent;
|
||
color: var(--muted);
|
||
border: 1.5px dashed var(--line-strong);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all var(--t);
|
||
box-shadow: none;
|
||
font-family: inherit;
|
||
margin-top: 2px;
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-add-item:hover {
|
||
background: var(--blue-light);
|
||
color: var(--blue);
|
||
border-color: var(--blue);
|
||
border-style: solid;
|
||
transform: none;
|
||
box-shadow: none;
|
||
filter: none;
|
||
}
|
||
|
||
/* ── Тумблер автоответа ─────────────────────────────────── */
|
||
.btn-start,
|
||
.btn-stop {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 20px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: opacity var(--t), transform var(--t);
|
||
}
|
||
.btn-start {
|
||
background: #22C55E;
|
||
color: #fff;
|
||
}
|
||
.btn-stop {
|
||
background: #EF4444;
|
||
color: #fff;
|
||
}
|
||
.btn-start:hover,
|
||
.btn-stop:hover {
|
||
opacity: 0.88;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.autoreply-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
padding: 8px 0 12px;
|
||
border-bottom: 1px solid var(--line);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
fieldset:disabled .star-toggle,
|
||
fieldset:disabled .filter-option,
|
||
fieldset:disabled .pool-item-input,
|
||
fieldset:disabled .btn-add-item,
|
||
fieldset:disabled button[type="submit"] {
|
||
opacity: 0.45;
|
||
cursor: not-allowed;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ── Тег артикула ───────────────────────────────────────── */
|
||
.tag-article {
|
||
display: inline-block;
|
||
margin-left: 5px;
|
||
padding: 1px 6px;
|
||
background: #EEF2FF;
|
||
color: #4338CA;
|
||
border-radius: 4px;
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.01em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ── Статус пропущен ────────────────────────────────────── */
|
||
.log-status--skip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 2px 8px;
|
||
border-radius: 99px;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
background: #F3F4F6;
|
||
color: #6B7280;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ─── Auto-reply settings ────────────────────────────────────────── */
|
||
.settings-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
.settings-label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin-bottom: 12px;
|
||
}
|
||
.star-toggles {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.star-toggle {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
.star-toggle input { display: none; }
|
||
.star-toggle span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 8px 18px;
|
||
border-radius: 99px;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
border: 2px solid currentColor;
|
||
opacity: 0.35;
|
||
transition: opacity .15s, transform .15s;
|
||
}
|
||
.star-toggle input:checked + span { opacity: 1; transform: scale(1.05); }
|
||
.star-toggle--1 span { color: #EF4444; }
|
||
.star-toggle--2 span { color: #F97316; }
|
||
.star-toggle--3 span { color: #EAB308; }
|
||
.star-toggle--4 span { color: #3B82F6; }
|
||
.star-toggle--5 span { color: #22C55E; }
|
||
|
||
.filter-options {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.filter-option {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.filter-option input { margin-top: 3px; }
|
||
.filter-option small { display: block; color: var(--muted); font-size: 12px; }
|
||
|
||
.pool-columns {
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pool-col {
|
||
flex: 1 1 180px;
|
||
min-width: 160px;
|
||
border-radius: var(--r);
|
||
padding: 16px;
|
||
border: 2px solid;
|
||
}
|
||
.pool-col--1 { border-color: #FEE2E2; background: #FFF5F5; }
|
||
.pool-col--2 { border-color: #FFEDD5; background: #FFFAF5; }
|
||
.pool-col--3 { border-color: #FEF9C3; background: #FFFEF0; }
|
||
.pool-col--4 { border-color: #DBEAFE; background: #F0F7FF; }
|
||
.pool-col--5 { border-color: #DCFCE7; background: #F0FFF4; }
|
||
.pool-col__header {
|
||
margin-bottom: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* star-chip colors 1-3 */
|
||
.star-chip--1 { background: #FEE2E2; color: #EF4444; }
|
||
.star-chip--2 { background: #FFEDD5; color: #F97316; }
|
||
.star-chip--3 { background: #FEF9C3; color: #CA8A04; }
|
||
|
||
/* ── Filter pills ────────────────────────────────────────── */
|
||
.filter-pills {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.filter-pill {
|
||
cursor: pointer;
|
||
flex: 1 1 160px;
|
||
min-width: 140px;
|
||
}
|
||
.filter-pill input { display: none; }
|
||
.filter-pill span {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
padding: 12px 16px;
|
||
border-radius: var(--r);
|
||
border: 2px solid var(--line);
|
||
background: var(--card);
|
||
transition: border-color .15s, background .15s;
|
||
}
|
||
.filter-pill span strong { font-size: 13px; font-weight: 600; }
|
||
.filter-pill span small { font-size: 11px; color: var(--muted); }
|
||
.filter-pill input:checked + span {
|
||
border-color: var(--wb);
|
||
background: var(--wb-light);
|
||
}
|
||
.filter-pill input:checked + span strong { color: var(--wb); }
|
||
|
||
/* ── Star tabs ───────────────────────────────────────────── */
|
||
.star-tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 0;
|
||
}
|
||
.star-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 14px;
|
||
border-radius: var(--r) var(--r) 0 0;
|
||
border: 2px solid var(--line);
|
||
border-bottom: none;
|
||
cursor: pointer;
|
||
background: var(--card);
|
||
opacity: 0.5;
|
||
transition: opacity .15s, background .15s, border-color .15s;
|
||
user-select: none;
|
||
position: relative;
|
||
bottom: -2px;
|
||
}
|
||
.star-tab.star-tab--on { opacity: 1; }
|
||
.star-tab.star-tab--active {
|
||
background: var(--bg);
|
||
opacity: 1;
|
||
z-index: 1;
|
||
}
|
||
.star-tab--1.star-tab--active { border-color: #EF4444; }
|
||
.star-tab--2.star-tab--active { border-color: #F97316; }
|
||
.star-tab--3.star-tab--active { border-color: #EAB308; }
|
||
.star-tab--4.star-tab--active { border-color: #3B82F6; }
|
||
.star-tab--5.star-tab--active { border-color: #22C55E; }
|
||
.star-tab__label { font-weight: 700; font-size: 15px; }
|
||
.star-tab--1 .star-tab__label { color: #EF4444; }
|
||
.star-tab--2 .star-tab__label { color: #F97316; }
|
||
.star-tab--3 .star-tab__label { color: #EAB308; }
|
||
.star-tab--4 .star-tab__label { color: #3B82F6; }
|
||
.star-tab--5 .star-tab__label { color: #22C55E; }
|
||
.star-tab__count {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
min-width: 18px;
|
||
height: 18px;
|
||
line-height: 18px;
|
||
text-align: center;
|
||
border-radius: 99px;
|
||
background: var(--line);
|
||
color: var(--muted);
|
||
padding: 0 5px;
|
||
}
|
||
/* mini toggle inside tab */
|
||
.star-tab__toggle { cursor: pointer; display: flex; align-items: center; }
|
||
.star-tab__toggle input { display: none; }
|
||
.star-tab__toggle-track {
|
||
display: inline-block;
|
||
width: 28px;
|
||
height: 16px;
|
||
border-radius: 8px;
|
||
background: var(--line);
|
||
position: relative;
|
||
transition: background .15s;
|
||
}
|
||
.star-tab__toggle-track::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 2px; left: 2px;
|
||
width: 12px; height: 12px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
transition: transform .15s;
|
||
}
|
||
.star-tab__toggle input:checked ~ .star-tab__toggle-track { background: #22C55E; }
|
||
.star-tab__toggle input:checked ~ .star-tab__toggle-track::after { transform: translateX(12px); }
|
||
|
||
/* ── Star panel ──────────────────────────────────────────── */
|
||
.star-panel {
|
||
border: 2px solid var(--line);
|
||
border-radius: 0 var(--r) var(--r) var(--r);
|
||
padding: 20px;
|
||
background: var(--bg);
|
||
}
|
||
.star-panel__header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.pool-panel-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.pool-template-row {
|
||
display: grid;
|
||
grid-template-columns: 28px 1fr 36px;
|
||
gap: 8px;
|
||
align-items: start;
|
||
}
|
||
.pool-template-num {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: var(--line);
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
margin-top: 8px;
|
||
}
|
||
.pool-template-input {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px 14px;
|
||
border: 1.5px solid var(--line);
|
||
border-radius: var(--r);
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
resize: vertical;
|
||
background: var(--card);
|
||
color: var(--text);
|
||
transition: border-color .15s;
|
||
line-height: 1.5;
|
||
}
|
||
.pool-template-input:focus {
|
||
outline: none;
|
||
border-color: var(--wb);
|
||
}
|
||
.pool-template-del {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
background: var(--red-bg);
|
||
color: var(--red);
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 8px;
|
||
transition: background .15s;
|
||
flex-shrink: 0;
|
||
}
|
||
.pool-template-del:hover { background: #fecaca; }
|
||
.btn-add-template {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 9px 16px;
|
||
border-radius: var(--r);
|
||
border: 1.5px dashed var(--line);
|
||
background: transparent;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: border-color .15s, color .15s;
|
||
}
|
||
.btn-add-template:hover { border-color: var(--wb); color: var(--wb); }
|
||
|
||
/* ── Save button ─────────────────────────────────────────── */
|
||
.settings-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 20px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.btn-save {
|
||
padding: 10px 28px;
|
||
background: var(--wb);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: var(--r);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: opacity .15s;
|
||
}
|
||
.btn-save:hover { opacity: 0.85; }
|
||
fieldset:disabled .btn-save { opacity: 0.4; cursor: not-allowed; }
|
||
fieldset:disabled .pool-template-input,
|
||
fieldset:disabled .pool-template-del,
|
||
fieldset:disabled .btn-add-template,
|
||
fieldset:disabled .star-tab,
|
||
fieldset:disabled .filter-pill { pointer-events: none; opacity: 0.5; }
|
||
|
||
/* ── Log entries ─────────────────────────────────────────── */
|
||
.log-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
.log-entry {
|
||
display: flex;
|
||
gap: 16px;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
align-items: flex-start;
|
||
}
|
||
.log-entry:last-child { border-bottom: none; }
|
||
.log-entry__left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-shrink: 0;
|
||
width: 52px;
|
||
}
|
||
.log-entry__rating {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
font-weight: 800;
|
||
font-size: 13px;
|
||
}
|
||
.log-entry__status { font-size: 11px; text-align: center; white-space: nowrap; }
|
||
.log-entry__body { flex: 1; min-width: 0; }
|
||
.log-entry__meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: baseline;
|
||
margin-bottom: 6px;
|
||
}
|
||
.log-entry__product { font-size: 13px; font-weight: 600; color: var(--text); }
|
||
.log-entry__buyer { font-size: 12px; color: var(--muted); }
|
||
.log-entry__time { font-size: 11px; color: var(--muted); margin-left: auto; }
|
||
.log-entry__review {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
padding: 8px 12px;
|
||
background: var(--card);
|
||
border-radius: 6px;
|
||
border-left: 3px solid var(--line);
|
||
margin-bottom: 6px;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
.log-entry__reply {
|
||
font-size: 13px;
|
||
color: var(--text);
|
||
padding: 8px 12px;
|
||
background: var(--wb-light);
|
||
border-radius: 6px;
|
||
border-left: 3px solid var(--wb);
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
.log-entry__reply-ico {
|
||
color: var(--wb);
|
||
font-weight: 700;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
/* ── Store picker (topbar dropdown) ─────────────────────── */
|
||
.store-picker {
|
||
position: relative;
|
||
}
|
||
.store-picker__btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 12px;
|
||
border-radius: var(--r-sm);
|
||
background: var(--line);
|
||
border: 1.5px solid var(--line-strong);
|
||
color: var(--text);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
box-shadow: none;
|
||
transition: background var(--t);
|
||
white-space: nowrap;
|
||
max-width: 180px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.store-picker__btn:hover { background: var(--line-strong); filter: none; transform: none; box-shadow: none; }
|
||
.store-picker__dropdown {
|
||
display: none;
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
right: 0;
|
||
min-width: 200px;
|
||
background: #fff;
|
||
border: 1.5px solid var(--line);
|
||
border-radius: var(--r);
|
||
box-shadow: var(--shadow-md);
|
||
z-index: 300;
|
||
overflow: hidden;
|
||
padding: 6px;
|
||
}
|
||
.store-picker.open .store-picker__dropdown { display: block; }
|
||
.store-picker__item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
width: 100%;
|
||
padding: 9px 12px;
|
||
border-radius: var(--r-sm);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text);
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
box-shadow: none;
|
||
transition: background var(--t);
|
||
text-align: left;
|
||
}
|
||
.store-picker__item:hover { background: var(--line); filter: none; transform: none; box-shadow: none; }
|
||
.store-picker__item--active { color: var(--green); font-weight: 600; }
|
||
.store-picker__sep { height: 1px; background: var(--line); margin: 4px 0; }
|
||
|
||
/* ── Store cards (cabinet) ───────────────────────────────── */
|
||
.store-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.store-card {
|
||
border: 2px solid var(--line);
|
||
border-radius: var(--r);
|
||
padding: 18px 20px;
|
||
background: var(--card);
|
||
transition: border-color var(--t);
|
||
}
|
||
.store-card--active {
|
||
border-color: var(--green-line);
|
||
background: var(--green-bg);
|
||
}
|
||
.store-card__header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.store-card__icon {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: var(--r-sm);
|
||
background: var(--line);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: var(--muted);
|
||
}
|
||
.store-card--active .store-card__icon {
|
||
background: var(--green-line);
|
||
color: var(--green);
|
||
}
|
||
.store-card__info { flex: 1; min-width: 0; }
|
||
.store-card__name {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
.store-card__active-label {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--green);
|
||
margin-top: 2px;
|
||
display: block;
|
||
}
|
||
.store-card__actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
.btn-activate {
|
||
background: linear-gradient(180deg, #22C55E 0%, #16A34A 100%);
|
||
color: #fff;
|
||
padding: 8px 16px;
|
||
font-size: 13px;
|
||
box-shadow: 0 2px 8px rgba(34,197,94,0.3);
|
||
}
|
||
.btn-activate:hover { opacity: 0.88; box-shadow: 0 4px 12px rgba(34,197,94,0.4); filter: none; }
|
||
.store-card__edit {
|
||
margin-top: 14px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.store-card__edit summary {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
list-style: none;
|
||
}
|
||
.store-card__edit summary:hover { color: var(--text); }
|
||
.store-card__edit summary::marker,
|
||
.store-card__edit summary::-webkit-details-marker { display: none; }
|
||
.store-card__edit summary::before { content: '▸ '; font-size: 11px; }
|
||
.store-card__edit[open] summary::before { content: '▾ '; }
|