/* ============================================================
DEPLOY TO: public_html/styles.css
============================================================
NOTE: Google Fonts (Fraunces, Inter) are loaded via
tags in each PHP page's , not @import here. That was
causing intermittent unstyled-page renders on refresh. */
:root {
--bg-0: #081428;
--ink: #f1f5e8;
--ink-dim: #9aa39a;
--muted: #66706a;
--accent: #5cd66b;
--accent-2: #3ba0ff;
--accent-3: #ff9d3a;
--rule: rgba(241, 245, 232, 0.12);
--card-bg: rgba(255, 255, 255, 0.035);
--card-bg-hover: rgba(255, 255, 255, 0.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-0);
color: var(--ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
overflow-x: hidden;
}
/* Drifting gradient orbs */
.bg-orbs {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
filter: blur(60px);
}
.orb {
position: absolute;
border-radius: 50%;
opacity: 0.55;
will-change: transform;
}
.orb-1 {
width: 55vmax;
height: 55vmax;
background: radial-gradient(circle, #5cd66b 0%, transparent 65%);
top: -15%;
left: -15%;
animation: drift1 28s ease-in-out infinite alternate;
}
.orb-2 {
width: 50vmax;
height: 50vmax;
background: radial-gradient(circle, #3ba0ff 0%, transparent 65%);
bottom: -20%;
right: -15%;
animation: drift2 34s ease-in-out infinite alternate;
opacity: 0.4;
}
.orb-3 {
width: 40vmax;
height: 40vmax;
background: radial-gradient(circle, #ff9d3a 0%, transparent 65%);
top: 30%;
right: 10%;
animation: drift3 40s ease-in-out infinite alternate;
opacity: 0.3;
}
@keyframes drift1 {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20vw, 15vh) scale(1.1); }
100% { transform: translate(10vw, 30vh) scale(0.95); }
}
@keyframes drift2 {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-18vw, -10vh) scale(1.15); }
100% { transform: translate(-25vw, 5vh) scale(1); }
}
@keyframes drift3 {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-12vw, 20vh) scale(0.9); }
100% { transform: translate(8vw, -10vh) scale(1.1); }
}
/* Film grain */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.18;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
.wrap {
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 4.5rem 1.75rem 2rem;
flex: 1;
position: relative;
z-index: 2;
}
/* Brand block */
.brand {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.logo {
width: 88px;
height: 88px;
display: block;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}
.status {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-dim);
}
.pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(92, 214, 107, 0.7);
animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(92, 214, 107, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(92, 214, 107, 0); }
100% { box-shadow: 0 0 0 0 rgba(92, 214, 107, 0); }
}
/* Headline */
h1 {
font-family: 'Fraunces', Georgia, serif;
font-optical-sizing: auto;
font-variation-settings: "SOFT" 50, "opsz" 144;
font-size: clamp(2.4rem, 6.5vw, 4rem);
font-weight: 400;
font-style: italic;
margin: 0 0 3.5rem;
letter-spacing: -0.025em;
line-height: 1.08;
color: var(--ink);
max-width: 16ch;
}
h1 .accent {
color: var(--accent-3);
font-style: italic;
}
/* Section label */
.section-label {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1.25rem;
}
.section-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--rule);
}
/* Link cards (used on public site + admin dashboard) */
.links {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.9rem;
}
.link-card {
position: relative;
display: block;
background: var(--card-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--rule);
border-radius: 12px;
padding: 1.35rem 1.5rem;
text-decoration: none;
color: var(--ink);
overflow: hidden;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.link-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
.link-card:hover {
background: var(--card-bg-hover);
border-color: rgba(92, 214, 107, 0.35);
transform: translateY(-2px);
}
.link-card:hover::before { transform: scaleY(1); }
.link-card h2 {
font-family: 'Fraunces', Georgia, serif;
font-variation-settings: "opsz" 36, "SOFT" 30;
margin: 0 0 0.3rem;
font-size: 1.35rem;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
}
.link-card .arrow {
display: inline-block;
margin-left: 0.4rem;
color: var(--ink-dim);
transition: transform 0.25s ease, color 0.25s ease;
}
.link-card:hover .arrow {
color: var(--accent);
transform: translateX(4px);
}
.link-card p {
margin: 0;
color: var(--ink-dim);
font-size: 0.95rem;
}
/* Footer */
footer {
position: relative;
z-index: 2;
border-top: 1px solid var(--rule);
padding: 1.5rem;
text-align: center;
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.03em;
}
footer a {
color: var(--ink-dim);
text-decoration: none;
border-bottom: 1px dotted var(--muted);
transition: color 0.2s ease, border-color 0.2s ease;
}
footer a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* Secret door: footer logo */
.secret-door {
display: block;
margin: 0 auto 1rem;
width: 52px;
height: 52px;
opacity: 0.55;
transition: opacity 0.3s ease, transform 0.3s ease;
border-bottom: none !important;
}
.secret-door:hover {
opacity: 1;
transform: scale(1.05);
}
.secret-door img { width: 100%; height: 100%; display: block; }
@media (max-width: 480px) {
.wrap { padding: 3rem 1.25rem 1.5rem; }
.logo { width: 72px; height: 72px; }
.brand { gap: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
.pulse, .orb { animation: none; }
.link-card, .link-card::before, .link-card .arrow { transition: none; }
}
/* ---------- Admin components ---------- */
.admin-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.admin-header .brand { margin: 0; }
.admin-actions { display: flex; gap: 1.25rem; align-items: center; }
.ghost-link {
color: var(--ink-dim);
text-decoration: none;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
border-bottom: 1px dotted var(--muted);
padding-bottom: 2px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.ghost-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.lede { color: var(--ink-dim); max-width: 60ch; margin: 0 0 2rem; }
/* Stats row */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin-bottom: 2.5rem;
}
.stat {
background: var(--card-bg);
border: 1px solid var(--rule);
border-radius: 10px;
padding: 1rem 1.15rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.stat-label {
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.4rem;
}
.stat-value {
font-family: 'Fraunces', Georgia, serif;
font-variation-settings: "opsz" 36;
font-size: 1.6rem;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
}
/* Toolbar (filter tabs + actions) */
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filter-tab {
display: inline-block;
padding: 0.4rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--rule);
color: var(--ink-dim);
text-decoration: none;
font-size: 0.82rem;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-tab:hover { color: var(--ink); border-color: rgba(92, 214, 107, 0.35); }
.filter-tab.active {
background: rgba(92, 214, 107, 0.15);
color: var(--accent);
border-color: rgba(92, 214, 107, 0.4);
}
.toolbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Buttons */
.btn {
display: inline-block;
padding: 0.7rem 1.1rem;
border-radius: 8px;
font-family: inherit;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
text-decoration: none;
border: 1px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn-primary { background: var(--accent); color: #08150a; border-color: var(--accent); }
.btn-primary:hover { background: #6ee07a; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--ink-dim); border-color: var(--rule); }
.btn-secondary:hover { color: var(--ink); border-color: rgba(92, 214, 107, 0.4); }
.btn-danger { background: transparent; color: #ff6b6b; border-color: rgba(255, 107, 107, 0.35); }
.btn-danger:hover { background: rgba(255, 107, 107, 0.12); }
.row-end { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.stack { display: grid; gap: 1rem; }
/* Data table */
.table-wrap {
border: 1px solid var(--rule);
border-radius: 10px;
overflow: hidden;
background: var(--card-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.data-table thead th {
text-align: left;
padding: 0.85rem 1rem;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid var(--rule);
background: rgba(0,0,0,0.15);
}
.data-table tbody td {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--rule);
color: var(--ink);
vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { cursor: pointer; transition: background 0.15s ease; }
.data-table tbody tr:hover { background: rgba(92, 214, 107, 0.06); }
.data-table tbody tr.row-muted { opacity: 0.55; }
.muted { color: var(--muted); font-size: 0.85em; }
.mono { font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; }
/* Pills */
.pill {
display: inline-block;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid transparent;
vertical-align: middle;
margin-left: 0.35rem;
}
.pill-holding { background: rgba(58, 160, 255, 0.15); color: var(--accent-2); border-color: rgba(58, 160, 255, 0.3); }
.pill-free { background: rgba(92, 214, 107, 0.18); color: var(--accent); border-color: rgba(92, 214, 107, 0.4); }
.pill-sold { background: rgba(255, 157, 58, 0.15); color: var(--accent-3); border-color: rgba(255, 157, 58, 0.35); }
.pill-kept { background: rgba(154, 163, 154, 0.15); color: var(--ink-dim); border-color: var(--rule); }
.pill-gave_away,
.pill-gave.away { background: rgba(154, 163, 154, 0.15); color: var(--ink-dim); border-color: var(--rule); }
.pill-warn { background: rgba(255, 107, 107, 0.12); color: #ff8f8f; border-color: rgba(255, 107, 107, 0.3); }
/* Forms */
textarea, .data-table input[type="text"], input[type="text"], input[type="url"],
input[type="date"], input[type="number"], select {
width: 100%;
background: rgba(0,0,0,0.35);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 0.7rem 0.9rem;
color: var(--ink);
font-family: inherit;
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s ease;
}
textarea { font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; line-height: 1.5; resize: vertical; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.inline-input {
padding: 0.4rem 0.55rem !important;
font-size: 0.88rem !important;
border-radius: 6px !important;
}
.form-grid { max-width: 720px; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.check { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font-size: 0.95rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.check input[type="checkbox"] { width: auto; }
/* Flash messages */
.flash {
padding: 0.85rem 1.1rem;
border-radius: 8px;
margin-bottom: 1.5rem;
border: 1px solid transparent;
}
.flash-good { background: rgba(92, 214, 107, 0.12); border-color: rgba(92, 214, 107, 0.35); color: var(--accent); }
.flash-bad { background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.35); color: #ff8f8f; }
/* Empty state */
.empty {
padding: 3rem 1rem;
text-align: center;
color: var(--ink-dim);
border: 1px dashed var(--rule);
border-radius: 12px;
}
.empty a { color: var(--accent); }
/* ============================================================
Tool mode — applied to admin working pages (Vine, etc).
Solid background, no orbs, sans-serif, dense layout, desktop-first.
Enable with
============================================================ */
body.tool-mode { background: #171a20; }
body.tool-mode .bg-orbs { display: none; }
body.tool-mode::after { display: none; } /* kill grain */
body.tool-mode .wrap {
max-width: 1280px;
padding: 2rem 2rem 3rem;
}
body.tool-mode .admin-header { margin-bottom: 1.5rem; }
body.tool-mode .logo { width: 56px; height: 56px; }
body.tool-mode .brand { gap: 0.75rem; margin-bottom: 0; }
/* Plain h1 for tool pages */
body.tool-mode h1 {
font-family: 'Inter', -apple-system, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 1.5rem;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 0.35rem;
max-width: none;
}
body.tool-mode h1 .accent { color: var(--ink); font-style: normal; }
body.tool-mode .lede {
font-size: 0.88rem;
color: var(--ink-dim);
margin-bottom: 1.5rem;
max-width: 90ch;
}
/* Info / legend panel */
.legend {
background: rgba(255,255,255,0.03);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 0.8rem 1rem;
font-size: 0.85rem;
color: var(--ink-dim);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.legend strong { color: var(--ink); font-weight: 600; }
.legend .divider { color: var(--muted); margin: 0 0.5rem; }
/* Denser stats in tool mode */
body.tool-mode .stats {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.75rem;
margin-bottom: 1.5rem;
}
body.tool-mode .stat { padding: 0.75rem 0.9rem; border-radius: 6px; }
body.tool-mode .stat-label { font-size: 0.62rem; margin-bottom: 0.25rem; }
body.tool-mode .stat-value { font-family: 'Inter', sans-serif; font-size: 1.35rem; font-weight: 600; }
/* Denser tables in tool mode */
body.tool-mode .table-wrap { border-radius: 6px; background: rgba(255,255,255,0.02); }
body.tool-mode .data-table { font-size: 0.87rem; }
body.tool-mode .data-table thead th {
padding: 0.6rem 0.75rem;
font-size: 0.62rem;
letter-spacing: 0.16em;
background: rgba(0,0,0,0.25);
cursor: help;
}
body.tool-mode .data-table thead th .col-desc {
display: block;
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--muted);
margin-top: 2px;
}
body.tool-mode .data-table tbody td { padding: 0.55rem 0.75rem; }
body.tool-mode .data-table tbody tr:hover { background: rgba(255,255,255,0.04); }
body.tool-mode .pill { font-size: 0.65rem; padding: 0.1rem 0.45rem; }
/* Subheading between sections */
body.tool-mode .subhead {
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-dim);
margin: 1.75rem 0 0.6rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--rule);
}
body.tool-mode .subhead .count {
color: var(--muted);
font-weight: 400;
margin-left: 0.5rem;
letter-spacing: 0;
}
/* Toolbar in tool mode: tighter */
body.tool-mode .toolbar { margin-bottom: 0.75rem; }
body.tool-mode .filter-tab { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
body.tool-mode .btn { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
/* Countdown coloring */
.countdown-soon { color: var(--accent-3); font-weight: 600; }
.countdown-overdue { color: var(--accent); font-weight: 600; }
.countdown-far { color: var(--ink-dim); }
/* Inline Amazon link chip inside a table row */
.amz-link {
display: inline-block;
margin-left: 0.5rem;
padding: 0.05rem 0.4rem;
font-size: 0.7rem;
font-weight: 500;
color: var(--ink-dim);
text-decoration: none;
border: 1px solid var(--rule);
border-radius: 4px;
vertical-align: middle;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.amz-link:hover {
color: var(--accent-3);
border-color: rgba(255, 157, 58, 0.4);
background: rgba(255, 157, 58, 0.1);
}
/* Search row above the filter tabs */
.search-row {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
align-items: center;
}
.search-input {
flex: 1;
max-width: 420px;
padding: 0.5rem 0.85rem !important;
font-size: 0.9rem !important;
}
/* Sortable column headers */
.sort-link {
color: inherit;
text-decoration: none;
display: block;
cursor: pointer;
transition: color 0.15s ease;
}
.sort-link:hover { color: var(--ink); }
.sort-link.active { color: var(--accent); }
.sort-arrow {
font-size: 0.7em;
margin-left: 0.15em;
color: var(--accent);
}
.data-table.sortable thead th { user-select: none; }
/* "View all" link in subhead */
.subhead-link {
color: var(--accent);
text-decoration: none;
font-size: 0.72rem;
letter-spacing: 0.06em;
margin-left: 0.75rem;
border-bottom: 1px dotted rgba(92, 214, 107, 0.4);
padding-bottom: 1px;
}
.subhead-link:hover { border-bottom-color: var(--accent); }
/* Pagination */
.pagination {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 1.25rem;
flex-wrap: wrap;
font-size: 0.85rem;
}
.page-btn, .page-num {
display: inline-block;
padding: 0.4rem 0.75rem;
border-radius: 5px;
border: 1px solid var(--rule);
color: var(--ink-dim);
text-decoration: none;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.page-btn:hover, .page-num:hover {
color: var(--ink);
border-color: rgba(92, 214, 107, 0.4);
}
.page-num.active {
background: rgba(92, 214, 107, 0.15);
color: var(--accent);
border-color: rgba(92, 214, 107, 0.4);
font-weight: 600;
}
.page-btn-disabled {
color: var(--muted);
border-color: var(--rule);
cursor: default;
opacity: 0.5;
}
.page-btn-disabled:hover { color: var(--muted); border-color: var(--rule); }
.page-info {
color: var(--muted);
margin-left: 0.75rem;
font-size: 0.8rem;
}
/* ============================================================
Readability pass — brighten dim text and bump sizes
in tool-mode. Overrides earlier tool-mode declarations.
============================================================ */
body.tool-mode {
/* Brighter grays for tool pages so everything reads clearly */
--ink-dim: #d4d8cd;
--muted: #a8ada2;
}
body.tool-mode h1 { font-size: 1.85rem; }
body.tool-mode .lede { font-size: 1.05rem; color: var(--ink-dim); }
body.tool-mode .legend { font-size: 1rem; color: var(--ink-dim); line-height: 1.7; padding: 1rem 1.25rem; }
body.tool-mode .legend strong { color: var(--ink); }
body.tool-mode .stat-label { font-size: 0.8rem; color: var(--ink-dim); letter-spacing: 0.14em; }
body.tool-mode .stat-value { font-size: 1.75rem; }
body.tool-mode .subhead { font-size: 0.95rem; color: var(--ink); letter-spacing: 0.1em; padding-bottom: 0.5rem; }
body.tool-mode .subhead .count { font-size: 0.9rem; color: var(--ink-dim); }
/* Make the "View all →" chip obviously a button */
body.tool-mode .subhead-link {
display: inline-block;
color: var(--ink);
background: rgba(92, 214, 107, 0.18);
border: 1px solid rgba(92, 214, 107, 0.5);
border-radius: 5px;
padding: 0.25rem 0.7rem;
font-size: 0.85rem;
letter-spacing: 0.02em;
text-transform: none;
margin-left: 0.75rem;
text-decoration: none;
font-weight: 500;
}
body.tool-mode .subhead-link:hover {
background: rgba(92, 214, 107, 0.3);
border-color: var(--accent);
color: #fff;
}
body.tool-mode .data-table { font-size: 1rem; }
body.tool-mode .data-table thead th { font-size: 0.78rem; padding: 0.75rem 0.85rem; color: var(--ink-dim); letter-spacing: 0.13em; }
body.tool-mode .data-table thead th .col-desc { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
body.tool-mode .data-table tbody td { padding: 0.7rem 0.85rem; }
body.tool-mode .pill { font-size: 0.75rem; padding: 0.15rem 0.55rem; }
body.tool-mode .filter-tab { font-size: 0.9rem; padding: 0.4rem 0.85rem; }
body.tool-mode .btn { font-size: 0.95rem; padding: 0.6rem 1rem; }
body.tool-mode .search-input { font-size: 1rem !important; padding: 0.6rem 0.95rem !important; }
body.tool-mode .amz-link { font-size: 0.78rem; padding: 0.1rem 0.5rem; color: var(--ink-dim); }
body.tool-mode .amz-link:hover { color: var(--accent-3); }
body.tool-mode .ghost-link { font-size: 0.82rem; color: var(--ink-dim); }
body.tool-mode .status { font-size: 0.82rem; color: var(--ink-dim); }
body.tool-mode .pagination { font-size: 0.95rem; margin-top: 1.5rem; }
body.tool-mode .page-btn,
body.tool-mode .page-num { padding: 0.5rem 0.85rem; color: var(--ink); }
body.tool-mode .page-info { font-size: 0.9rem; color: var(--ink-dim); }
body.tool-mode .muted { color: var(--muted); font-size: 0.9em; }
body.tool-mode .empty { font-size: 1rem; color: var(--ink-dim); }
body.tool-mode .empty a { color: var(--accent); }
/* Flash messages a bit larger too */
body.tool-mode .flash { font-size: 1rem; }
/* ============================================================
Sticky search + section tabs across top
============================================================ */
body.tool-mode .sticky-search {
position: sticky;
top: 0;
z-index: 20;
background: #171a20;
padding: 1rem 0;
margin: 0.5rem 0 1.25rem;
border-bottom: 1px solid var(--rule);
}
body.tool-mode .sticky-search .search-row {
margin: 0;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
body.tool-mode .sticky-search .search-input {
flex: 1;
min-width: 260px;
max-width: none;
}
body.tool-mode .sticky-search .search-actions {
margin-left: auto;
display: flex;
gap: 0.5rem;
}
/* Section tabs (across top of results area) */
.section-tabs {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
margin-bottom: 1rem;
border-bottom: 1px solid var(--rule);
padding-bottom: 0;
}
.section-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1rem;
color: var(--ink-dim);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.section-tab:hover {
color: var(--ink);
}
.section-tab.active {
color: var(--ink);
border-bottom-color: var(--accent);
}
.section-tab-count {
display: inline-block;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: var(--ink-dim);
font-size: 0.78rem;
font-weight: 500;
min-width: 1.5rem;
text-align: center;
}
.section-tab.active .section-tab-count {
background: rgba(92, 214, 107, 0.2);
color: var(--accent);
}
/* Results header (between tabs and table) */
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
font-size: 1rem;
}
.results-header strong { color: var(--ink); }
/* ============================================================
Sell-queue features: color strips, bulk bar, row actions,
color key legend
============================================================ */
/* Color key strip (visual legend) */
.color-key {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0.5rem 0 1.5rem;
padding: 0.75rem 1rem;
background: rgba(255,255,255,0.02);
border-left: 1px solid var(--rule);
border-right: 1px solid var(--rule);
border-radius: 4px;
font-size: 0.85rem;
color: var(--ink-dim);
}
.ckey { display: inline-flex; align-items: center; gap: 0.4rem; }
.ckey-swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 3px;
}
.ckey-holding { background: var(--accent-2); opacity: 0.6; }
.ckey-free { background: var(--accent); }
.ckey-to_sell { background: var(--accent-3); }
.ckey-sold { background: #8c78ff; }
.ckey-kept { background: var(--muted); }
.ckey-delisted { background: #ff6b6b; }
/* Row color strips (left border) */
.data-table tbody tr td:first-child { border-left: 4px solid transparent; }
tr.row-status-holding td:first-child { border-left-color: var(--accent-2); opacity: 1; }
tr.row-status-free td:first-child { border-left-color: var(--accent); }
tr.row-status-to_sell td:first-child { border-left-color: var(--accent-3); }
tr.row-status-sold td:first-child { border-left-color: #8c78ff; }
tr.row-status-kept td:first-child { border-left-color: var(--muted); }
tr.row-status-gave_away td:first-child{ border-left-color: var(--muted); }
/* Subtle background tints for terminal + queued states */
tr.row-status-sold td { background: rgba(140, 120, 255, 0.045); }
tr.row-status-to_sell td { background: rgba(255, 157, 58, 0.05); }
tr.row-status-free td { background: rgba(92, 214, 107, 0.045); }
tr.row-status-kept td,
tr.row-status-gave_away td { opacity: 0.7; }
/* Checkbox column shouldn't respond to row-click styling */
.data-table td.col-check,
.data-table td.col-actions { cursor: default; }
.data-table td.col-check input { cursor: pointer; }
/* to_sell pill color */
.pill-to_sell { background: rgba(255, 157, 58, 0.18); color: var(--accent-3); border-color: rgba(255, 157, 58, 0.4); }
/* Per-row quick-action button */
.row-action {
display: inline-block;
padding: 0.3rem 0.65rem;
font-size: 0.82rem;
font-weight: 500;
border-radius: 5px;
border: 1px solid rgba(255, 157, 58, 0.4);
background: rgba(255, 157, 58, 0.12);
color: var(--accent-3);
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease, transform 0.1s ease;
font-family: inherit;
}
.row-action:hover { background: rgba(255, 157, 58, 0.25); transform: translateY(-1px); }
.row-action-sold { color: #b8a5ff; border-color: rgba(140, 120, 255, 0.4); background: rgba(140, 120, 255, 0.15); }
.row-action-sold:hover { background: rgba(140, 120, 255, 0.28); }
/* Section-tab dots per category (small colored dot in tab) */
.section-tab-free .section-tab-count { background: rgba(92, 214, 107, 0.18); color: var(--accent); }
.section-tab-to_sell .section-tab-count { background: rgba(255, 157, 58, 0.18); color: var(--accent-3); }
.section-tab-soon .section-tab-count { background: rgba(255, 157, 58, 0.14); color: var(--accent-3); }
.section-tab-sold .section-tab-count { background: rgba(140, 120, 255, 0.18); color: #b8a5ff; }
.section-tab-no_review .section-tab-count { background: rgba(255, 107, 107, 0.14); color: #ff8f8f; }
.section-tab-delisted .section-tab-count { background: rgba(255, 107, 107, 0.14); color: #ff8f8f; }
/* Sticky bottom bulk-action bar */
.bulk-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 100;
background: rgba(23, 26, 32, 0.98);
border-top: 1px solid var(--rule);
padding: 0.85rem 1.5rem;
transform: translateY(120%);
transition: transform 0.25s ease;
box-shadow: 0 -8px 20px rgba(0,0,0,0.35);
}
.bulk-bar.visible { transform: translateY(0); }
.bulk-bar-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.bulk-count {
color: var(--ink);
font-weight: 600;
padding: 0.4rem 0.85rem;
background: rgba(92, 214, 107, 0.18);
border-radius: 5px;
border: 1px solid rgba(92, 214, 107, 0.4);
min-width: 100px;
text-align: center;
}
.bulk-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Space for content so bulk bar doesn't overlap last row */
body.tool-mode #bulk-form ~ .pagination { padding-bottom: 5rem; }