/* ==========================================================================
7. Prompt Bazár (Frontend)
========================================================================== */
.two-col-layout {
display: grid;
grid-template-columns: 7fr 3fr;
gap: 32px;
align-items: start;
}
@media (max-width: 900px) {
.two-col-layout {
grid-template-columns: 1fr;
}
}
.prompts-search-input {
flex: 2;
min-width: 200px;
height: 38px;
padding: 0 12px;
font-size: 14px;
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp);
background-color: var(--bg-card-alt);
outline: none;
}
.prompts-model-select {
height: 38px;
background-color: var(--bg-card-alt);
min-width: 150px;
}
.prompt-model-select-full {
width: 100%;
}
.prompts-clear-link {
padding: 0 16px;
border: 1px solid var(--steel-200);
background-color: var(--bg-card);
color: var(--steel-700);
border-radius: var(--radius-sharp);
}
.prompts-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.btn-block-link {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* Általános Segéd-osztályok */
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.alert-success {
background-color: var(--success-soft);
border: 1px solid #c2e7cf;
color: var(--success);
padding: 12px 16px;
border-radius: var(--radius-sharp);
font-size: 13.5px;
font-weight: 500;
}
.alert-danger {
background-color: var(--danger-soft);
border: 1px solid #f8d7da;
color: var(--danger);
padding: 12px 16px;
border-radius: var(--radius-sharp);
font-size: 13.5px;
font-weight: 500;
}
.badge-tested {
background-color: var(--success-soft);
border: 1px solid #c2e7cf;
color: var(--success);
}
.field-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--steel-500);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
text-align: left;
}
.prompt-body-textarea {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp);
background-color: var(--bg-card-alt);
outline: none;
}
.prompt-body-textarea:focus {
border-color: var(--accent-orange);
background-color: var(--bg-card);
}
/* ==========================================================================
8. Vault / Profile Page Redesign (Match Screenshot)
========================================================================== */
.profile-hero-section {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
padding-bottom: 16px;
border-bottom: 1px solid var(--steel-100);
}
.profile-hero-icon-wrap {
width: auto;
height: auto;
background: none;
border: none;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-orange);
box-shadow: none;
flex-shrink: 0;
padding: 0;
}
.profile-hero-icon-wrap svg,
.profile-hero-icon-wrap i {
width: 28px;
height: 28px;
stroke-width: 2;
}
/* ==========================================================================
Ikon méret utility classes — mindenhol egységesen
========================================================================== */
.icon-12 svg, i.icon-12 { width: 12px; height: 12px; }
.icon-14 svg, i.icon-14 { width: 14px; height: 14px; }
.icon-16 svg, i.icon-16 { width: 16px; height: 16px; }
.icon-18 svg, i.icon-18 { width: 18px; height: 18px; }
.icon-20 svg, i.icon-20 { width: 20px; height: 20px; }
.icon-24 svg, i.icon-24 { width: 24px; height: 24px; }
.icon-28 svg, i.icon-28 { width: 28px; height: 28px; }
.icon-32 svg, i.icon-32 { width: 32px; height: 32px; }
.icon-40 svg, i.icon-40 { width: 40px; height: 40px; }
.icon-48 svg, i.icon-48 { width: 48px; height: 48px; }
.profile-hero-title {
font-size: 26px;
font-weight: 850;
color: var(--steel-900);
line-height: 1.1;
margin-bottom: 4px;
}
.profile-hero-subtitle {
font-size: 13.5px;
color: var(--steel-400);
}
.profile-cols {
display: flex;
gap: 40px;
}
.profile-col-left {
flex: 1;
padding-right: 40px;
border-right: 1px solid var(--steel-100);
}
.profile-col-right {
flex: 1;
}
@media (max-width: 768px) {
.profile-cols {
flex-direction: column;
gap: 24px;
}
.profile-col-left {
padding-right: 0;
border-right: none;
border-bottom: 1px solid var(--steel-100);
padding-bottom: 24px;
}
}
/* Vault — jelszó-oszlop és saját promptok (korábban inline stílusok) */
.vault-pass-title {
font-size: 16px;
font-weight: 700;
color: var(--steel-900);
margin-bottom: 4px;
text-transform: none;
letter-spacing: normal;
}
.vault-pass-note {
font-size: 13px;
color: var(--steel-400);
margin-bottom: 20px;
}
.vault-card-gap {
margin-top: 32px;
}
.vault-section-title {
font-size: 18px;
font-weight: 750;
color: var(--steel-900);
margin-bottom: 6px;
text-transform: none;
letter-spacing: normal;
}
.vault-section-sub {
margin-bottom: 20px;
}
.vault-empty-prompts {
text-align: center;
padding: 24px;
}
.vault-empty-prompts p {
color: var(--steel-400);
margin-bottom: 12px;
}
.vault-empty-prompts-btn {
display: inline-flex;
}
.vault-prompts-scroll {
max-height: 300px;
overflow-y: auto;
}
.vault-prompt-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border-bottom: 1px solid var(--steel-100);
}
.vault-prompt-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
color: var(--steel-800);
text-transform: none;
letter-spacing: normal;
}
.vault-prompt-meta {
font-size: 12px;
color: var(--steel-400);
}
.vault-prompt-badge {
font-size: 11px;
}
/* ------------------------------------------------------------
Hírlevél-archívum (hirlevel-archivum.php)
------------------------------------------------------------ */
.nl-arch-list {
list-style: none;
margin: 0;
padding: 0;
}
.nl-arch-item {
border-bottom: 1px solid var(--steel-100);
}
.nl-arch-item:last-child {
border-bottom: 0;
}
.nl-arch-item-link {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 6px;
text-decoration: none;
transition: background 0.15s ease;
}
.nl-arch-item-link:hover {
background: rgba(191, 176, 138, 0.07);
}
.nl-arch-item-date {
flex-shrink: 0;
min-width: 148px;
font-size: 12px;
font-weight: 700;
color: var(--steel-400);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.nl-arch-item-subject {
flex: 1;
min-width: 0;
font-size: 14.5px;
font-weight: 700;
color: var(--steel-800);
}
.nl-arch-item-arrow {
width: 15px;
height: 15px;
color: var(--steel-300);
flex-shrink: 0;
transition: color 0.15s ease, transform 0.15s ease;
}
.nl-arch-item-link:hover .nl-arch-item-arrow {
color: var(--accent-orange-strong);
transform: translateX(2px);
}
.nl-arch-issue-date {
margin: 0 0 18px;
font-size: 12.5px;
font-weight: 700;
color: var(--steel-400);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* A levél-HTML inline stílusokkal jön a cronból — csak keretezzük */
.nl-arch-issue-body {
background: #ffffff;
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp, 4px);
padding: 26px 28px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 10px rgba(27, 25, 23, 0.05);
overflow-x: auto;
}
.nl-arch-back {
margin: 18px 0 0;
font-size: 13.5px;
}
.nl-arch-back a {
color: var(--steel-600);
font-weight: 700;
text-decoration: none;
}
.nl-arch-back a:hover {
color: var(--accent-orange-strong);
text-decoration: underline;
}
@media (max-width: 640px) {
.nl-arch-item-link {
flex-wrap: wrap;
gap: 4px 10px;
}
.nl-arch-item-date {
min-width: 0;
width: 100%;
}
.nl-arch-issue-body {
padding: 18px 15px;
}
}
/* Mentett cikkek (olvasólista) a Vaultban */
.vault-saved-link {
color: var(--steel-800);
text-decoration: none;
transition: color 0.15s ease;
}
.vault-saved-link:hover {
color: var(--accent-orange-strong);
text-decoration: underline;
}
.vault-unsave-form {
flex-shrink: 0;
margin-left: 12px;
width: auto; /* a globális form{width:100%} felülírása — gomb marad a sorban */
}
/* Törlés = piros (egységes gomb-szemantika), lapos ikon-gomb */
.vault-unsave-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp);
background: #ffffff;
color: var(--steel-400);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.vault-unsave-btn:hover {
color: #b3261e;
border-color: rgba(179, 38, 30, 0.4);
background: rgba(179, 38, 30, 0.06);
}
.profile-avatar-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
.profile-avatar-img {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: var(--radius-sharp);
border: 1px solid var(--steel-200);
box-shadow: var(--shadow-card);
margin-bottom: 6px;
}
.profile-avatar-placeholder {
width: 96px;
height: 96px;
border-radius: var(--radius-sharp);
background-color: var(--steel-100);
border: 1px solid var(--steel-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--steel-400);
margin-bottom: 6px;
}
.profile-avatar-label {
font-size: 12px;
color: var(--steel-400);
}
.profile-avatar-delete {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 10px;
background: transparent;
border: 1px solid rgba(220, 38, 38, 0.25);
border-radius: var(--radius-sharp, 4px);
font-size: 11.5px;
font-weight: 600;
color: #b91c1c;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
user-select: none;
width: fit-content;
}
.profile-avatar-delete:hover {
background: rgba(220, 38, 38, 0.06);
border-color: rgba(220, 38, 38, 0.4);
}
.profile-avatar-delete input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 0;
accent-color: #b91c1c;
cursor: pointer;
}
.profile-avatar-delete svg {
width: 12px;
height: 12px;
stroke-width: 2.2;
}
.profile-divider {
border: none;
border-top: 1px solid var(--steel-100);
margin: 24px 0;
}
.profile-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.profile-footer-turnstile {
flex: 1;
min-width: 250px;
}
/* A .btn-save egységes narancs kinézetét a 05-home-buttons.css adja. */
/* ==========================================================================
Feketelista / Csaló-adatbázis (feketelista.php)
========================================================================== */
/* A .bl-page a header.php .site-main-jén BELÜL egy második .site-main —
a felső paddingjét nullázzuk, hogy a hero-sáv a fejlécig érjen fel. */
.bl-page { max-width: 900px; margin: 0 auto; padding-top: 0; }
.bl-hero { margin-bottom: 28px; }
.bl-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.bl-hero p { font-size: 15px; margin-top: 8px; }
.bl-flash { padding: 12px 16px; border-radius: var(--radius-sharp, 4px); margin-bottom: 18px; font-weight: 600; font-size: 14px; }
.bl-flash--ok { background: var(--success-soft); color: var(--success); border: 1px solid rgba(21,128,61,0.2); }
.bl-flash--err { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(214,52,26,0.2); }
/* Feketelista keresősáv redesign */
.bl-toolbar {
margin-bottom: 24px;
display: flex;
justify-content: center;
}
.bl-search {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-card);
border: 1px solid var(--steel-100);
border-radius: var(--radius-sharp);
padding: 8px 14px;
max-width: 640px;
width: 100%;
box-shadow: var(--shadow-card);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bl-search:focus-within {
border-color: var(--accent-orange);
box-shadow: 0 0 14px var(--accent-orange-soft);
}
.bl-search i, .bl-search svg {
width: 18px;
height: 18px;
color: var(--accent-orange);
flex-shrink: 0;
}
input.bl-search-input[type="text"],
input.bl-search-input[type="text"]:focus {
flex: 1;
border: none;
outline: none;
font-size: 15px;
background-color: transparent;
background: transparent;
box-shadow: none;
color: var(--steel-900);
padding: 0;
height: 100%;
}
.bl-search button.btn-primary {
min-width: 0;
padding: 0 20px;
}
.bl-submit-card { margin-bottom: 22px; padding: 0; }
.bl-submit-card > summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 800; color: var(--steel-800); display: flex; align-items: center; gap: 8px; }
.bl-submit-card > summary::-webkit-details-marker { display: none; }
.bl-submit-card > summary i, .bl-submit-card > summary svg { width: 18px; height: 18px; color: var(--accent-orange); }
.bl-submit-card[open] > summary { border-bottom: 1px solid var(--steel-100); }
.bl-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.bl-form > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--steel-600); }
.bl-form input[type="text"], .bl-form select, .bl-form textarea { border: 1px solid var(--steel-200); border-radius: var(--radius-sharp, 4px); padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--steel-900); outline: none; transition: border-color 0.15s ease; }
.bl-form input[type="text"]:focus, .bl-form select:focus, .bl-form textarea:focus { border-color: var(--accent-orange); }
.bl-form-row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }
.bl-form-actions { display: flex; gap: 10px; }
.bl-count { color: var(--steel-400); font-size: 13px; margin-bottom: 14px; }
.bl-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.bl-entry-link {
display: flex;
flex-direction: column;
height: 100%;
background: var(--bg-card);
border: 1px solid var(--steel-100);
border-radius: var(--radius-sharp);
padding: 20px;
text-decoration: none;
color: inherit;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
box-shadow: var(--shadow-card);
}
.bl-entry-link:hover {
border-color: var(--accent-orange);
box-shadow: var(--shadow-card-hover);
transform: translateY(-2px);
}
.bl-entry-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.bl-entry-value {
font-size: 16px;
font-weight: 800;
color: var(--steel-900);
margin-top: 4px;
word-break: break-all;
}
.bl-entry-reason {
margin: 12px 0;
color: var(--steel-600);
font-size: 13.5px;
line-height: 1.5;
flex: 1;
}
.bl-entry-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--steel-100);
color: var(--steel-400);
font-size: 12px;
}
.bl-entry-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bl-entry-meta i, .bl-entry-meta svg { width: 13px; height: 13px; }
.bl-type { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; background: var(--accent-orange-soft); color: var(--accent-orange-strong); }
.bl-type--email { background: rgba(59,130,246,0.1); color: #1d4ed8; }
.bl-type--text { background: rgba(107,114,128,0.12); color: #4b5563; }
.bl-identified { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: #15803d; background: var(--success-soft); padding: 3px 9px; border-radius: 4px; }
.bl-identified i, .bl-identified svg { width: 13px; height: 13px; }
.bl-identified--sm { font-size: 10.5px; padding: 2px 7px; }
.bl-pager { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.bl-page-link { padding: 7px 12px; border: 1px solid var(--steel-200); border-radius: var(--radius-sharp, 4px); text-decoration: none; color: var(--steel-700); font-weight: 700; font-size: 13px; }
.bl-page-link.is-active { background: var(--accent-orange); color: #fff; border-color: var(--accent-orange); }
.bl-back { display: inline-flex; align-items: center; gap: 6px; color: var(--steel-500); text-decoration: none; font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.bl-back:hover { color: var(--accent-orange); }
.bl-back i, .bl-back svg { width: 15px; height: 15px; }
.bl-detail { padding: 24px; }
.bl-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bl-detail-value { font-size: 24px; font-weight: 800; color: var(--steel-900); margin: 0 0 10px; word-break: break-word; }
.bl-detail-reason { color: var(--steel-700); font-size: 15px; }
.bl-evidence { margin: 16px 0; background: var(--bg-card-alt); border: 1px solid var(--steel-100); border-left: 3px solid var(--steel-300); border-radius: var(--radius-sharp, 4px); padding: 14px 16px; }
.bl-evidence-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--steel-500); text-transform: uppercase; letter-spacing: 0.04em; }
.bl-evidence-label i, .bl-evidence-label svg { width: 14px; height: 14px; }
.bl-evidence p { margin: 8px 0 0; color: var(--steel-700); font-size: 14px; line-height: 1.6; }
.bl-detail-meta { display: flex; gap: 16px; color: var(--steel-400); font-size: 13px; margin-top: 14px; }
.bl-detail-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bl-detail-meta i, .bl-detail-meta svg { width: 14px; height: 14px; }
.bl-edit { margin-top: 18px; border-top: 1px solid var(--steel-100); padding-top: 14px; }
.bl-edit > summary { cursor: pointer; font-weight: 700; color: var(--steel-600); display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.bl-edit > summary i, .bl-edit > summary svg { width: 15px; height: 15px; }
.bl-edit .bl-form { padding: 14px 0 0; }
.bl-delete-btn { margin-top: 10px; background: none; border: none; color: var(--danger); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 0; }
.bl-delete-btn i, .bl-delete-btn svg { width: 15px; height: 15px; }
.bl-comments { margin-top: 20px; padding: 24px; }
.bl-comments h3 { font-size: 17px; font-weight: 800; color: var(--steel-900); display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.bl-comments h3 i, .bl-comments h3 svg { width: 18px; height: 18px; color: var(--accent-orange); }
.bl-comment-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px; }
.bl-comment { background: var(--bg-card-alt); border: 1px solid var(--steel-100); border-radius: var(--radius-sharp, 4px); padding: 12px 14px; }
.bl-comment-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.bl-comment-head strong { font-size: 13.5px; color: var(--steel-800); }
.bl-comment-head span { font-size: 11.5px; color: var(--steel-400); }
.bl-comment-body { font-size: 14px; color: var(--steel-700); line-height: 1.55; }
.bl-comment-form textarea { width: 100%; }
.bl-login-hint { color: var(--steel-500); font-size: 14px; }
.bl-login-hint.card {
max-width: 640px;
margin: 0 auto 32px;
padding: 24px;
background: linear-gradient(135deg, rgba(191, 176, 138, 0.02) 0%, rgba(191, 176, 138, 0.05) 100%);
border: 1px solid rgba(191, 176, 138, 0.15);
border-radius: var(--radius-sharp);
box-shadow: 0 8px 24px rgba(191, 176, 138, 0.04), 0 0 12px rgba(191, 176, 138, 0.02);
text-align: center;
color: var(--steel-600);
line-height: 1.6;
position: relative;
}
.bl-login-hint.card::before {
display: none;
}
.bl-login-hint a, .bl-comments a { color: var(--accent-orange-strong); font-weight: 700; }
.bl-login-hint-icon { width: 24px; height: 24px; color: var(--accent-orange); margin-bottom: 8px; display: inline-block; }
.bl-detail-login-warning {
display: flex;
align-items: center;
gap: 12px;
background: rgba(191, 176, 138, 0.04);
border: 1px solid rgba(191, 176, 138, 0.15);
border-radius: var(--radius-sharp);
padding: 12px 16px;
margin: 16px 0;
font-size: 13.5px;
color: var(--steel-700);
}
.bl-detail-login-warning i,
.bl-detail-login-warning svg {
width: 20px;
height: 20px;
color: var(--accent-orange);
flex-shrink: 0;
}
.bl-detail-login-warning a {
color: var(--accent-orange-strong);
font-weight: 700;
text-decoration: underline;
}
.bl-detail-login-warning a:hover {
color: var(--accent-orange);
}
.bl-empty { color: var(--steel-400); }
.bl-empty.card { padding: 24px; text-align: center; }
@media (max-width: 900px) {
.bl-list {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 640px) {
.bl-form-row { grid-template-columns: 1fr; }
.bl-search { flex-wrap: wrap; }
.bl-search input { min-width: 100%; }
.bl-list {
grid-template-columns: 1fr;
gap: 12px;
}
}
/* ==========================================================================
Prompt Bazár — frissített, prémium kártya-elemek (a site stílusához)
========================================================================== */
.prompt-card {
background: var(--bg-card);
border: 1px solid var(--steel-100);
border-radius: var(--radius-sharp);
padding: 28px;
box-shadow: var(--shadow-card);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
position: relative;
overflow: hidden;
}
.prompt-card::before,
.prompt-submit-card::before,
.prompt-guest-card::before,
.card-premium-tested::before {
content: none;
}
/* Hover matches article card hover exactly */
.prompt-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(27, 21, 17, 0.10);
border-color: var(--steel-200);
}
.prompt-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
gap: 16px;
}
.prompt-card-title {
font-size: 19px;
font-weight: 800;
color: var(--steel-900); /* volt --steel-850: sosem létezett a skálán (50..900), így a deklaráció csendben eldobódott és a cím a body halványabb színét örökölte */
margin-bottom: 8px;
letter-spacing: -0.01em;
line-height: 1.3;
}
.prompt-card-meta-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Prompt Meta Strip (styled like news source-strip) */
.prompt-meta-strip {
display: inline-flex;
align-items: stretch;
flex-wrap: wrap;
background: linear-gradient(180deg, #ffffff 0%, #f7f3f0 100%);
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp, 4px);
overflow: hidden;
font-size: 11px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 25, 23, 0.06);
max-width: 100%;
margin-top: 4px;
}
.prompt-meta-strip-label {
padding: 6px 11px;
background: linear-gradient(180deg, #383838 0%, #161616 60%, #0d0d0d 100%);
color: #f5ede8;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 9px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
display: inline-flex;
align-items: center;
flex-shrink: 0;
border-right: 1px solid var(--steel-200);
}
.prompt-meta-strip-items {
display: inline-flex;
flex-wrap: wrap;
align-items: stretch;
min-width: 0;
}
.prompt-meta-strip-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
color: var(--steel-600);
font-weight: 600;
text-decoration: none;
border-left: 1px solid var(--steel-100);
transition: color 0.15s ease, background 0.15s ease;
font-size: 11px;
}
.prompt-meta-strip-items > .prompt-meta-strip-item:first-child {
border-left: none;
}
.prompt-meta-strip-item i,
.prompt-meta-strip-item svg {
width: 13px;
height: 13px;
color: var(--steel-400);
flex-shrink: 0;
}
/* Hover effects for link items (e.g. Category link) */
a.prompt-meta-strip-item:hover {
background-color: var(--bg-card-alt);
color: var(--accent-orange-strong);
}
a.prompt-meta-strip-item:hover i,
a.prompt-meta-strip-item:hover svg {
color: var(--accent-orange);
}
/* Image inside strip (Model logo) */
.prompt-model-logo-img {
width: 14px;
height: 14px;
object-fit: contain;
flex-shrink: 0;
margin-right: 2px;
}
/* Status inside meta strip */
.prompt-meta-strip-item--status {
font-weight: 800;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.03em;
}
.prompt-meta-strip-item--status.prompt-badge--verified {
background: var(--success-soft);
color: var(--success);
border-left-color: rgba(21,128,61,0.15);
}
.prompt-meta-strip-item--status.prompt-badge--community {
background: rgba(59, 130, 246, 0.08);
color: #1d4ed8;
border-left-color: rgba(29,78,216,0.15);
}
.prompt-meta-strip-item--status.prompt-badge--pending {
background: var(--warning-soft);
color: var(--warning);
border-left-color: rgba(217,119,6,0.15);
}
.prompt-meta-strip-item--status i,
.prompt-meta-strip-item--status svg {
width: 12px;
height: 12px;
}
.prompt-meta-strip-item--status.prompt-badge--verified i,
.prompt-meta-strip-item--status.prompt-badge--verified svg {
color: var(--success);
}
.prompt-meta-strip-item--status.prompt-badge--community i,
.prompt-meta-strip-item--status.prompt-badge--community svg {
color: #1d4ed8;
}
.prompt-meta-strip-item--status.prompt-badge--pending i,
.prompt-meta-strip-item--status.prompt-badge--pending svg {
color: var(--warning);
}
/* Status Badges */
.prompt-badge {
flex-shrink: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
padding: 6px 12px;
border-radius: var(--radius-sharp);
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.prompt-badge i, .prompt-badge svg {
stroke-width: 2.5;
}
.prompt-badge--verified {
border: 1px solid var(--steel-200);
}
.prompt-badge--community {
border: 1px solid rgba(29, 78, 216, 0.12);
}
.prompt-badge--pending {
border: 1px solid rgba(180, 83, 9, 0.15);
}
.prompt-cat-chip:hover {
background: var(--accent-orange);
}
.prompt-cat-chip i, .prompt-cat-chip svg {
stroke-width: 2.2;
}
/* Kép-összehasonlítás: Ebből készült -> Ez lett */
.prompt-images-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.prompt-image-wrapper {
position: relative;
border-radius: var(--radius-sharp);
overflow: hidden;
cursor: zoom-in;
border: 1px solid var(--steel-150);
aspect-ratio: 16 / 10;
background-color: var(--bg-card-alt);
transition: border-color 0.2s ease;
}
.prompt-image-wrapper:hover {
border-color: var(--accent-orange);
}
.prompt-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.prompt-image-wrapper:hover img {
transform: scale(1.02);
}
.prompt-image-badge {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(14, 9, 6, 0.85);
color: #ffffff;
font-size: 11px;
font-weight: 700;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.9);
color: #1a1a1a;
font-size: 10px;
font-weight: 800;
padding: 3px 6px;
border-radius: var(--radius-sharp, 4px);
text-transform: uppercase;
letter-spacing: 0.05em;
pointer-events: none;
}
.prompt-image-badge.prompt-image-badge--after {
background: var(--accent-orange);
color: #ffffff;
}
/* macOS-style Terminal Layout & Side actions grid */
.prompt-bottom-grid {
display: grid;
grid-template-columns: 1fr 180px;
gap: 16px;
margin-bottom: 18px;
}
@media (max-width: 640px) {
.prompt-bottom-grid {
grid-template-columns: 1fr;
}
}
.prompt-terminal {
background-color: #1e1e1e;
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp);
overflow: hidden;
display: flex;
flex-direction: column;
}
.prompt-terminal-header {
background-color: #2b2b2b;
padding: 10px 14px;
display: flex;
gap: 6px;
border-bottom: 1px solid #1a1a1a;
}
.terminal-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.terminal-dot--red { background-color: #ff5f56; }
.terminal-dot--yellow { background-color: #ffbd2e; }
.terminal-dot--green { background-color: #27c93f; }
.prompt-card-body-wrap {
position: relative;
overflow: hidden;
flex-grow: 1;
}
.prompt-card-pre {
margin: 0;
font-family: 'Outfit', 'Courier New', Courier, monospace;
font-size: 14.5px;
white-space: pre-wrap;
word-break: break-word;
color: #ebdbb2;
line-height: 1.6;
background-color: transparent;
border: none;
border-radius: 0;
padding: 16px 20px 32px;
max-height: 200px;
overflow-y: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}
.prompt-card-body-wrap.expanded .prompt-card-pre {
max-height: 1000px;
overflow-y: auto;
-webkit-mask-image: none;
mask-image: none;
padding-bottom: 24px;
}
.prompt-expand-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to top, #1e1e1e 20%, rgba(30, 30, 30, 0) 100%);
pointer-events: none;
transition: opacity 0.3s ease;
}
.prompt-card-body-wrap.expanded .prompt-expand-overlay {
display: none;
}
/* Actions Sidebar */
.prompt-actions-sidebar {
display: flex;
flex-direction: column;
gap: 10px;
}
.prompt-sidebar-btn {
width: 100%;
height: 44px;
border-radius: var(--radius-sharp);
font-family: 'Outfit', sans-serif;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
border: none;
text-transform: none;
}
.prompt-sidebar-btn:hover {
transform: translateY(-1.5px);
}
.prompt-sidebar-btn:active {
transform: translateY(0.5px);
}
.prompt-sidebar-btn i, .prompt-sidebar-btn svg {
width: 15px;
height: 15px;
stroke-width: 2.5;
flex-shrink: 0;
}
/* Primary Button (Dark/Charcoal like escape) */
.prompt-sidebar-btn--primary {
background-color: #2e3033;
color: #ffffff;
border: 1px solid #2e3033;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.prompt-sidebar-btn--primary:hover {
background-color: #1c1d1f;
border-color: #1c1d1f;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
/* Secondary & Tertiary Buttons (Grey admin theme) */
.prompt-sidebar-btn--secondary,
.prompt-sidebar-btn--tertiary {
background-color: var(--bg-card);
color: #3b332a;
border: 1px solid var(--steel-200);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.prompt-sidebar-btn--secondary:hover,
.prompt-sidebar-btn--tertiary:hover {
background-color: var(--bg-card-alt);
border-color: var(--steel-300);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
/* Copied & Shared feedback */
.prompt-sidebar-btn--primary.copied {
background-color: var(--success);
color: #ffffff;
border-color: var(--success);
box-shadow: 0 4px 12px rgba(21, 128, 61, 0.2);
}
/* Prompt Card Footer (Date on left, Share row on right) */
.prompt-card-foot {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--steel-100);
display: flex;
align-items: center;
justify-content: space-between;
}
.prompt-card-date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--steel-400);
}
.prompt-card-date i, .prompt-card-date svg {
width: 14px;
height: 14px;
color: var(--steel-300);
}
.prompt-card-foot .share-buttons {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.prompt-card-foot .share-btn {
width: 36px;
height: 36px;
border-radius: var(--radius-sharp);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.prompt-card-foot .share-btn i,
.prompt-card-foot .share-btn svg {
width: 14px;
height: 14px;
}
/* Admin / moderation forms & buttons */
.sidebar-form {
margin: 0;
width: 100%;
}
.prompt-sidebar-btn--success {
background-color: var(--success-soft);
color: var(--success);
border: 1px solid rgba(21, 128, 61, 0.15);
}
.prompt-sidebar-btn--success:hover {
background-color: var(--success);
color: #ffffff;
border-color: var(--success);
}
.prompt-sidebar-btn--warning {
background-color: var(--warning-soft);
color: var(--warning);
border: 1px solid rgba(180, 83, 9, 0.15);
}
.prompt-sidebar-btn--warning:hover {
background-color: var(--warning);
color: #ffffff;
border-color: var(--warning);
}
.prompt-sidebar-btn--danger {
background-color: var(--danger-soft);
color: var(--danger);
border: 1px solid rgba(214, 52, 26, 0.15);
}
.prompt-sidebar-btn--danger:hover {
background-color: var(--danger);
color: #ffffff;
border-color: var(--danger);
}
/* Filter bar redesign */
.prompts-filter-form {
display: flex;
gap: 12px;
flex-wrap: wrap;
background: var(--bg-card);
padding: 16px;
border-radius: var(--radius-sharp);
border: 1px solid var(--steel-100);
box-shadow: var(--shadow-card);
margin-bottom: 24px;
align-items: center;
}
.prompts-model-select {
flex: 1 1 180px;
padding: 10px 14px;
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp);
background: var(--bg-card-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238b8179' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
background-size: 16px;
appearance: none;
color: var(--steel-800);
font-size: 14px;
font-weight: 600;
outline: none;
cursor: pointer;
transition: all 0.2s ease;
}
.prompts-model-select:focus {
border-color: var(--cat-promptok);
background-color: var(--bg-card);
box-shadow: 0 0 0 3px rgba(13, 138, 148, 0.1);
}
.prompts-clear-link {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
text-decoration: none;
}
/* Empty State */
.prompts-empty-state {
text-align: center;
padding: 64px 32px;
background: var(--bg-card);
border: 1px solid var(--steel-100);
border-radius: var(--radius-sharp);
box-shadow: var(--shadow-card);
}
.prompts-empty-icon-wrap {
color: var(--steel-300);
margin-bottom: 16px;
}
.prompts-empty-title {
font-size: 20px;
font-weight: 800;
color: var(--steel-900); /* volt --steel-850: sosem létezett a skálán (50..900), így a deklaráció csendben eldobódott és a cím a body halványabb színét örökölte */
margin-bottom: 8px;
}
.prompts-empty-desc {
font-size: 14.5px;
color: var(--steel-500);
}
/* Submitter column Sticky */
.prompts-col-submit > .card {
position: sticky;
top: 24px;
border-radius: var(--radius-sharp);
border: 1px solid var(--steel-100);
box-shadow: var(--shadow-card);
padding: 28px;
}
.prompt-submit-title {
font-size: 20px;
font-weight: 850;
color: var(--steel-900); /* volt --steel-850: sosem létezett a skálán (50..900), így a deklaráció csendben eldobódott és a cím a body halványabb színét örökölte */
}
.prompt-submit-title i, .prompt-submit-title svg {
stroke-width: 2.5;
}
.prompt-input {
font-weight: 550;
}
.prompt-input:focus {
box-shadow: 0 0 0 3px var(--accent-orange-soft);
}
.prompt-upload {
overflow: hidden;
}
.prompt-upload:hover {
background: var(--bg-card);
}
.prompt-upload i, .prompt-upload svg {
stroke-width: 2;
transition: transform 0.2s ease;
}
.prompt-upload:hover i, .prompt-upload:hover svg {
transform: translateY(-2px);
}
/* Image preview thumbnail inside dropzone */
.prompt-image-preview-container {
width: 100%;
height: 90px;
display: none;
margin-bottom: 8px;
border-radius: var(--radius-sharp);
overflow: hidden;
border: 1px solid var(--steel-200);
background: #000;
}
.prompt-image-preview-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prompt-upload.has-file .prompt-image-preview-container {
display: block;
}
.prompt-upload-input {
z-index: 10;
}
/* Guest sign in banner card */
.prompt-guest-card {
text-align: center;
padding: 36px 28px;
background-color: var(--bg-card);
border-top: none;
box-shadow: var(--shadow-card);
border-radius: var(--radius-sharp);
position: relative;
}
.prompt-guest-icon-wrap {
color: var(--accent-orange);
margin-bottom: 16px;
background: var(--accent-orange-soft);
width: 54px;
height: 54px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(191, 176, 138, 0.15);
}
.prompt-guest-icon-wrap i, .prompt-guest-icon-wrap svg {
width: 24px;
height: 24px;
stroke-width: 2.2;
}
/* Premium Lightbox Modal */
.prompt-lightbox {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(14, 9, 6, 0.95);
justify-content: center;
align-items: center;
cursor: zoom-out;
opacity: 0;
transition: opacity 0.25s ease;
}
.prompt-lightbox.show {
display: flex;
opacity: 1;
}
.prompt-lightbox-content {
max-width: 90%;
max-height: 90%;
border-radius: var(--radius-sharp);
box-shadow: 0 12px 48px rgba(0,0,0,0.6);
transform: scale(0.96);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.prompt-lightbox.show .prompt-lightbox-content {
transform: scale(1);
}
.prompt-lightbox-close {
position: absolute;
top: 20px;
right: 30px;
color: #f5f0ea;
font-size: 40px;
font-weight: bold;
cursor: pointer;
transition: color 0.15s ease;
}
.prompt-lightbox-close:hover {
color: var(--accent-orange);
}
@media (max-width: 900px) {
.prompts-col-submit > .card {
position: static;
}
}
@media (max-width: 640px) {
.prompt-card {
padding: 20px;
}
.prompt-card-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.prompt-badge {
align-self: flex-start;
}
.prompt-images-gallery {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Prompt Bazár v2 — kategória, képek (előtte/utána), AI+admin moderáció,
prémium beküldő űrlap
========================================================================== */
/* Badge: ikon + szöveg, becsületes állapotok */
.prompt-badge { display: inline-flex; align-items: center; gap: 5px; }
.prompt-badge i, .prompt-badge svg { width: 13px; height: 13px; }
.prompt-badge--verified { background: var(--success-soft); color: var(--success); }
.prompt-badge--community { background: rgba(59, 130, 246, 0.10); color: #1d4ed8; }
.prompt-badge--pending { background: var(--warning-soft); color: var(--warning); }
/* Kategória-chip a kártyán (kattintható) */
.prompt-cat-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 700;
background: var(--bg-card-alt); color: var(--steel-600);
border: 1px solid var(--steel-100);
padding: 3px 9px; border-radius: var(--radius-sharp, 4px); text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease;
}
.prompt-cat-chip:hover { border-color: var(--accent-orange); color: var(--accent-orange-strong); }
.prompt-cat-chip i, .prompt-cat-chip svg { width: 12px; height: 12px; }
/* Képek: előtte → utána */
.prompt-images {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 14px;
}
.prompt-image { margin: 0; flex: 1 1 200px; min-width: 0; }
.prompt-image img {
width: 100%; max-height: 320px; object-fit: cover;
border-radius: var(--radius-sharp, 4px); border: 1px solid var(--steel-100); display: block;
}
.prompt-image figcaption {
margin-top: 6px; font-size: 11.5px; font-weight: 700;
color: var(--steel-400); text-transform: uppercase; letter-spacing: 0.03em;
}
.prompt-image-arrow { color: var(--accent-orange); flex-shrink: 0; }
.prompt-image-arrow i, .prompt-image-arrow svg { width: 22px; height: 22px; }
/* Lábléc-akciók (admin/saját) */
.prompt-card-foot { flex-wrap: wrap; gap: 10px; }
.prompt-foot-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prompt-admin-btn {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 700; cursor: pointer;
padding: 5px 10px; border-radius: var(--radius-sharp, 4px);
background: var(--bg-card-alt); border: 1px solid var(--steel-200); color: var(--steel-700);
transition: all 0.15s ease;
}
.prompt-admin-btn i, .prompt-admin-btn svg { width: 14px; height: 14px; }
.prompt-admin-btn:hover { border-color: var(--steel-300); }
.prompt-admin-btn--ok { background: var(--success-soft); border-color: rgba(21,128,61,0.25); color: var(--success); }
.prompt-admin-btn--ok:hover { background: var(--success); color: #fff; border-color: var(--success); }
.prompt-admin-btn--del { color: var(--danger); }
.prompt-admin-btn--del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
/* --- Prémium beküldő űrlap --- */
.prompt-submit-card { border-top: 3px solid var(--accent-orange); }
.prompt-submit-title { display: flex; align-items: center; gap: 8px; }
.prompt-submit-title i, .prompt-submit-title svg { width: 20px; height: 20px; color: var(--accent-orange); }
.prompt-submit-form { margin-top: 16px; }
.prompt-input {
width: 100%; font-size: 14px; font-family: inherit;
padding: 10px 12px; border: 1px solid var(--steel-200); border-radius: var(--radius-sharp, 4px);
background: var(--bg-card-alt); color: var(--steel-900); outline: none;
transition: border-color 0.15s ease, background 0.15s ease; margin-bottom: 14px;
}
.prompt-input:focus { border-color: var(--accent-orange); background: var(--bg-card); }
.prompt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prompt-form-row .field-label { margin-top: 0; }
.prompt-body-textarea { min-height: 120px; resize: vertical; }
/* Kép-feltöltő dobozok */
.prompt-upload-row { margin-bottom: 16px; }
.prompt-upload {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
padding: 16px 10px; border: 1.5px dashed var(--steel-200); border-radius: var(--radius-sharp, 4px);
background: var(--bg-card-alt); color: var(--steel-500); cursor: pointer; text-align: center;
font-size: 12px; font-weight: 600; transition: all 0.15s ease;
}
.prompt-upload:hover { border-color: var(--accent-orange); color: var(--accent-orange-strong); }
.prompt-upload i, .prompt-upload svg { width: 22px; height: 22px; }
.prompt-upload.has-file { border-style: solid; border-color: var(--success); color: var(--success); background: var(--success-soft); }
.prompt-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.prompt-submit-btn { margin-top: 4px; }
@media (max-width: 640px) {
.prompt-form-row { grid-template-columns: 1fr; }
.prompt-images { flex-direction: column; align-items: stretch; }
.prompt-image-arrow { transform: rotate(90deg); align-self: center; }
}
/* ==========================================================================
8. Tech & AI Unicornisok (ai-unicornisok.php) — SZÜRKE ADMIN TÉMA
Az admin szürke palettájára építve: szürke háttér, fémes összegző sáv,
pill-szűrők, kártyázott szekciók. Max 5px lekerekítés, nincs gradient
szöveg. A színek változókban — később globálisan is kiemelhetők.
========================================================================== */
.uni-page {
/* A téma-változók (--uni-*) a 01-base.css :root-jában élnek — GLOBÁLISAK,
innen a lokális másolat törölve, hogy egyetlen forrás legyen. */
width: 100%;
margin: 0 0 64px;
padding: 28px clamp(16px, 3vw, 40px) 48px;
background: var(--uni-bg);
border-radius: var(--radius-sharp, 4px);
}
/* --- Összegző sor: visszafogott, prémium fémes sáv (szürke) --- */
.uni-summary,
.page-summary {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 0;
margin-bottom: 44px;
padding: 0 8px;
background: var(--uni-band-grad);
border: 1px solid var(--uni-band-border);
border-bottom: 3px solid var(--uni-band-edge);
border-radius: var(--radius-sharp, 4px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -6px 14px rgba(0, 0, 0, 0.05),
0 5px 14px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
/* Fémes csillanás a felső élen: finom fényvonal + lágy derengés (szürke) */
.uni-summary::before,
.page-summary::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 20%,
rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.4) 80%,
transparent 100%);
pointer-events: none;
}
.uni-summary::after,
.page-summary::after {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 16px;
background: radial-gradient(ellipse at 50% 0%,
rgba(255, 255, 255, 0.25) 0%,
transparent 70%);
pointer-events: none;
}
.uni-summary-item,
.page-summary-item {
flex: 1 1 200px;
display: flex;
flex-direction: column;
align-items: center; /* középre igazítás */
text-align: center;
gap: 3px;
padding: 18px 20px 16px;
border-left: 1px solid rgba(43, 38, 32, 0.14);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35); /* dupla, vésett elválasztó */
}
.uni-summary-item:first-child,
.page-summary-item:first-child {
border-left: none;
box-shadow: none;
}
.uni-summary-value,
.page-summary-value {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--uni-ink);
font-variant-numeric: tabular-nums;
line-height: 1.15;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.uni-summary-label,
.page-summary-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(43, 38, 32, 0.62);
}
/* A .page-summary a fenti .uni-summary szabályok aliasaként él (pixelre
azonos fémes champagne sáv) — a korábbi külön, eltérő megjelenésű
.page-summary blokk törölve. A page-summary--X kategória-módosítók a
markupban ártalmatlanok, megjelenést már nem változtatnak. */
/* --- Szekció-fejlécek --- */
.uni-section {
margin-bottom: 56px;
}
.uni-section-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 24px;
margin-bottom: 20px;
}
.uni-section-head h2 {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--uni-ink);
margin: 0;
}
/* --- Szűrősáv: EGY sorban — görgethető, nem törő --- */
.uni-filterbar {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 18px;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: rgba(163, 147, 108, 0.3) transparent;
}
.uni-filterbar::-webkit-scrollbar {
height: 5px;
}
.uni-filterbar::-webkit-scrollbar-track {
background: transparent;
}
.uni-filterbar::-webkit-scrollbar-thumb {
background: rgba(163, 147, 108, 0.3);
border-radius: var(--radius-sharp, 4px);
}
.uni-filterbar::-webkit-scrollbar-thumb:hover {
background: rgba(163, 147, 108, 0.5);
}
.uni-filter-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--uni-muted);
align-self: center;
margin-right: 4px;
white-space: nowrap;
flex-shrink: 0;
}
/* --- Szűrők: krém pill-gombok, aktív = telt narancs-arany --- */
.uni-filters {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
/* A pill a katalógus-tabok megjelenését követi (gradient felület, belső
fény-él, hover-emelkedés) — de az unicorn-téma színeiben. */
.uni-filter {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: #ffffff;
border: 1px solid var(--uni-border);
border-radius: 4px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
color: var(--uni-ink);
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.06);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
flex-shrink: 0;
}
.uni-filter:hover {
border-color: var(--steel-400);
background: #ffffff;
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 8px rgba(0, 0, 0, 0.1);
}
.uni-filter.is-active {
color: #ffffff;
background: #161616;
border-color: #1b1917;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 10px rgba(0, 0, 0, 0.2);
}
.uni-filter.is-active .uni-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
/* --- Színes pötty (ország / kategória jelölő) --- */
.uni-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--steel-300);
flex: none;
}
.uni-legend-ai-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 850;
background: rgba(191, 176, 138, 0.12);
color: #8a7a55;
padding: 2px 6px;
border-radius: var(--radius-sharp, 4px);
border: 1px solid rgba(191, 176, 138, 0.35);
line-height: 1;
letter-spacing: 0.02em;
}
.uni-legend-ft-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 850;
background: rgba(79, 70, 229, 0.08);
color: #4f46e5;
padding: 2px 6px;
border-radius: var(--radius-sharp, 4px);
border: 1px solid rgba(79, 70, 229, 0.25);
line-height: 1;
letter-spacing: 0.02em;
}
.uni-legend-ec-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 850;
background: rgba(16, 185, 129, 0.08);
color: #10b981;
padding: 2px 6px;
border-radius: var(--radius-sharp, 4px);
border: 1px solid rgba(16, 185, 129, 0.25);
line-height: 1;
letter-spacing: 0.02em;
}
.uni-legend-saas-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 850;
background: rgba(6, 182, 212, 0.08);
color: #06b6d4;
padding: 2px 6px;
border-radius: var(--radius-sharp, 4px);
border: 1px solid rgba(6, 182, 212, 0.25);
line-height: 1;
letter-spacing: 0.02em;
}
.uni-legend-dt-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 850;
background: rgba(100, 116, 139, 0.08);
color: #64748b;
padding: 2px 6px;
border-radius: var(--radius-sharp, 4px);
border: 1px solid rgba(100, 116, 139, 0.25);
line-height: 1;
letter-spacing: 0.02em;
}
.uni-legend-bt-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 850;
background: rgba(20, 184, 166, 0.08);
color: #14b8a6;
padding: 2px 6px;
border-radius: var(--radius-sharp, 4px);
border: 1px solid rgba(20, 184, 166, 0.25);
line-height: 1;
letter-spacing: 0.02em;
}
.uni-legend-tc-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 850;
background: rgba(148, 163, 184, 0.08);
color: #94a3b8;
padding: 2px 6px;
border-radius: var(--radius-sharp, 4px);
border: 1px solid rgba(148, 163, 184, 0.25);
line-height: 1;
letter-spacing: 0.02em;
}
/* --- Buboréktérkép + cég-lista panel: kétoszlopos rács --- */
.uni-bubble-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 250px;
gap: 0 24px;
align-items: stretch;
}
.uni-side-panel {
background: var(--uni-card);
border: 1px solid var(--uni-border);
border-radius: var(--radius-sharp, 4px);
box-shadow: 0 2px 8px rgba(64, 52, 30, 0.08);
padding: 14px 6px 14px 18px;
display: flex;
flex-direction: column;
min-height: 0;
}
.uni-side-panel-head {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--uni-muted);
margin-bottom: 10px;
}
.uni-side-list {
list-style: none;
margin: 0;
padding: 0 12px 0 0;
overflow-y: auto;
max-height: 520px;
flex: 1 1 auto;
}
.uni-side-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid var(--steel-100);
font-size: 12.5px;
font-weight: 600;
color: var(--steel-700);
}
.uni-side-list li.is-link { cursor: pointer; transition: color 0.15s ease; }
.uni-side-list li.is-link:hover { color: var(--uni-ink); }
.uni-side-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uni-side-val {
flex: none;
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 11.5px;
color: var(--steel-500);
}
/* --- Buboréktérkép: krém kártyában --- */
.uni-canvas-wrap {
position: relative;
background: var(--uni-card-soft);
border: 1px solid var(--uni-border);
border-radius: var(--radius-sharp, 4px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(64, 52, 30, 0.08);
overflow: hidden;
}
#uniCanvas {
display: block;
width: 100%;
}
.uni-tooltip {
position: absolute;
padding: 7px 12px;
background: var(--charcoal);
color: var(--charcoal-text-strong);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 5;
}
.uni-tooltip.is-visible {
opacity: 1;
transform: translateY(0);
}
.uni-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
margin-top: 12px;
}
.uni-legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--steel-400);
}
/* --- Rangsor-táblázat: krém kártyában --- */
.uni-table-wrap {
overflow-x: auto;
background: var(--uni-card);
border: 1px solid var(--uni-border);
border-radius: var(--radius-sharp, 4px);
box-shadow: 0 2px 8px rgba(64, 52, 30, 0.08);
}
.uni-table {
width: 100%;
border-collapse: collapse;
}
.uni-table th {
padding: 14px 16px;
text-align: center; /* fejléc az érték közepén */
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--uni-muted);
border-bottom: 2px solid var(--uni-border);
white-space: nowrap;
}
.uni-table td {
padding: 15px 16px;
text-align: center; /* értékek középre */
font-size: 14px;
color: var(--uni-ink);
border-bottom: 1px solid var(--uni-border);
vertical-align: middle;
}
/* Cég oszlop: marad balra zárt, a fejléc a nevek (logó utáni) vonalára tolva */
.uni-table th:nth-child(2),
.uni-table td:nth-child(2) { text-align: left; }
.uni-table th:nth-child(2) { padding-left: 58px; }
.uni-table tbody tr:last-child td { border-bottom: none; }
.uni-table tbody tr {
transition: background-color 0.12s ease;
}
.uni-table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.03);
}
/* Számoszlopok: középre zárt, azonos szélességű számjegyek */
.uni-table .uni-num {
text-align: center;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Helyezés — a .uni-table td szín-szabályánál erősebb szelektorral */
.uni-th-rank { width: 52px; }
.uni-table .uni-td-rank {
font-size: 16px;
font-weight: 800;
color: var(--steel-300);
font-variant-numeric: tabular-nums;
}
.uni-table .uni-td-rank--top {
color: var(--uni-accent);
}
/* Cég cella */
.uni-company {
display: flex;
align-items: center;
gap: 12px;
min-width: 180px;
}
.uni-thumb {
width: 30px;
height: 30px;
object-fit: contain;
border: 1px solid var(--steel-100);
background: #ffffff;
padding: 2px;
flex: none;
border-radius: var(--radius-sharp, 4px);
}
.uni-thumb--placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: var(--steel-400);
background: var(--bg-card-alt);
}
.uni-company-name {
font-weight: 750;
color: var(--uni-ink);
letter-spacing: -0.01em;
}
/* Értékelés-oszlop — a .uni-table td szín-szabályánál erősebb szelektorral */
.uni-table .uni-valuation {
font-size: 15px;
font-weight: 800;
color: var(--uni-ink);
}
/* Változás-cellák: csak színes szöveg + irányjelző, háttér nélkül */
.uni-change {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.uni-change i,
.uni-change svg {
width: 13px;
height: 13px;
flex: none;
}
.uni-change--up { color: var(--success); }
.uni-change--down { color: var(--danger); }
.uni-change--flat { color: var(--steel-400); }
.uni-change--na { color: var(--steel-300); font-weight: 600; }
/* Kategória / ország: pötty + sima szöveg, badge-háttér nélkül */
.uni-cat,
.uni-country {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--steel-600);
white-space: nowrap;
}
.uni-cat--ai .uni-dot { background: #a3936c; }
.uni-cat--fintech .uni-dot { background: #4f46e5; }
.uni-cat--tech .uni-dot { background: var(--steel-300); }
/* Web-link: ikon-only, visszafogott */
.uni-th-web { width: 48px; }
.uni-td-web { text-align: right; }
.uni-web-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: var(--steel-300);
transition: color 0.15s ease;
}
.uni-web-link:hover {
color: var(--uni-accent);
}
.uni-web-link i,
.uni-web-link svg {
width: 15px;
height: 15px;
}
.uni-empty {
padding: 32px 0;
color: var(--steel-600);
font-size: 14px;
}
/* --- Reszponzív --- */
@media (max-width: 900px) {
.uni-summary-item,
.page-summary-item {
flex: 1 1 45%;
padding: 16px 18px 14px;
}
.uni-summary-item:nth-child(odd),
.page-summary-item:nth-child(odd) {
border-left: none;
box-shadow: none;
}
.uni-summary-value, .page-summary-value { font-size: 24px; }
.uni-table th, .uni-table td { padding: 12px 10px; }
}
@media (max-width: 768px) {
/* A cég-lista panel a canvas alá esik */
.uni-bubble-layout { grid-template-columns: 1fr; gap: 16px 0; }
.uni-side-panel {
border-left: none;
border-top: none;
padding-left: 0;
}
.uni-side-list { max-height: 260px; }
}
@media (max-width: 640px) {
.uni-section-head { flex-direction: column; align-items: flex-start; }
.uni-section { margin-bottom: 40px; }
/* Összegző: 2x2 rács marad, csak kompaktabb — a 4 egymás alá tett
nagy szám túl sok görgetést adott a lényeg (buborékok) elé. */
.uni-summary, .page-summary { margin-bottom: 32px; padding: 0 4px; }
.uni-summary-item, .page-summary-item { padding: 12px 14px 10px; }
.uni-summary-value, .page-summary-value { font-size: 20px; }
.uni-summary-label, .page-summary-label { font-size: 10.5px; letter-spacing: 0.08em; }
/* Táblázat: az utolsó kör (7.) és kategória (8.) oszlop mobilon elrejtve —
a kategória-infó a buboréktérkép színeiben is megvan. */
.uni-table th:nth-child(7), .uni-table td:nth-child(7),
.uni-table th:nth-child(8), .uni-table td:nth-child(8) { display: none; }
.uni-table th, .uni-table td { padding: 11px 6px; font-size: 13px; }
/* A hosszú fejléc ("Értékelés (Mrd $)") hadd törjön két sorba, különben
egymaga vízszintes görgetést kényszerít. A .uni-table .uni-num nowrap
szabályánál erősebb szelektor kell; a td-k nowrap-je marad. */
.uni-table th, .uni-table th.uni-num { white-space: normal; }
.uni-table .uni-valuation { font-size: 14px; }
.uni-change { font-size: 12px; }
.uni-change i, .uni-change svg { width: 11px; height: 11px; }
.uni-company { min-width: 104px; gap: 8px; }
.uni-thumb { width: 26px; height: 26px; }
.uni-company-name { font-size: 13px; }
.uni-th-rank { width: 34px; }
.uni-table .uni-td-rank { font-size: 14px; }
.uni-th-web { width: 36px; }
.uni-legend { gap: 6px 18px; }
.uni-legend-item { font-size: 11.5px; }
}
@media (max-width: 430px) {
/* Nagyon keskeny kijelzőn az árbevétel (5.) és EV (6.) oszlop is lemegy —
az értékelés marad, a többi asztalin érhető el. */
.uni-table th:nth-child(5), .uni-table td:nth-child(5),
.uni-table th:nth-child(6), .uni-table td:nth-child(6) { display: none; }
}
/* ============================================================
AI API-ÁRKALKULÁTOR (ai-arkalkulator.php)
A rangsor a .uni-table prémium táblázatát használja; itt csak a
kalkulátor-specifikus elemek vannak. Max 5px kerekítés.
============================================================ */
/* Ha a kalkulátor a .uni-page (szürke téma) belsejében van, a beviteli mezők is a szürke színeit öröklik */
.uni-page .calc-input {
background-color: var(--uni-card);
border: 1px solid var(--uni-border);
color: var(--uni-ink);
}
.uni-page .calc-input:focus {
border-color: var(--uni-accent);
box-shadow: 0 0 0 3px rgba(163, 147, 108, 0.15);
}
.uni-page .calc-input-label {
color: var(--uni-muted);
}
.uni-page .calc-hint,
.uni-page .calc-disclaimer {
color: var(--uni-muted);
}
.calc-inputs {
display: flex;
flex-wrap: wrap;
gap: 20px 32px;
align-items: flex-end;
}
.calc-input-group {
display: flex;
flex-direction: column;
gap: 6px;
flex: 0 1 280px;
}
.calc-input-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--steel-400);
}
.calc-input {
padding: 12px 14px;
font-size: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--steel-900);
background: var(--bg-card);
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp, 4px);
width: 100%;
}
.calc-input:focus {
outline: none;
border-color: var(--steel-400);
box-shadow: 0 0 0 3px rgba(145, 138, 127, 0.2);
}
.calc-hint {
flex: 1 1 100%;
margin: 4px 0 0;
font-size: 13px;
color: var(--steel-400);
}
.calc-variant {
font-size: 12px;
color: var(--steel-400);
margin-top: 2px;
}
.calc-cost-usd {
display: block;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--steel-900);
white-space: nowrap;
}
.calc-cost-huf {
display: block;
font-size: 12px;
color: var(--steel-400);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.calc-disclaimer {
margin-top: 14px;
font-size: 12.5px;
color: var(--steel-400);
}
/* --- Eszköztár: keresés + szűrő + rendezés + találatszám --- */
.calc-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px 16px;
margin-bottom: 16px;
}
.calc-search {
position: relative;
flex: 1 1 240px;
}
.calc-search > i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--uni-muted);
pointer-events: none;
}
.calc-search input {
width: 100%;
padding: 10px 12px 10px 36px;
font-size: 14px;
color: var(--uni-ink);
background: var(--uni-card);
border: 1px solid var(--uni-border);
border-radius: var(--radius-sharp, 4px);
}
.calc-search input:focus {
outline: none;
border-color: var(--uni-accent);
box-shadow: 0 0 0 3px rgba(191, 176, 138, 0.18);
}
.calc-select-wrap {
display: flex;
flex-direction: column;
gap: 5px;
}
.calc-select-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--uni-muted);
}
.calc-select {
padding: 9px 34px 9px 12px;
font-size: 13.5px;
font-weight: 600;
color: var(--uni-ink);
background-color: var(--uni-card);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
border: 1px solid var(--uni-border);
border-radius: var(--radius-sharp, 4px);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.calc-select:focus {
outline: none;
border-color: var(--uni-accent);
box-shadow: 0 0 0 3px rgba(191, 176, 138, 0.18);
}
.calc-count {
margin-left: auto;
align-self: center;
font-size: 12.5px;
font-weight: 600;
color: var(--uni-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* --- Modalitás-fülek (szöveg / kép / hang / embedding…) --- */
.calc-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 24px;
border-bottom: 1px solid var(--uni-border);
}
.calc-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 16px;
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
color: var(--uni-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.calc-tab i { width: 16px; height: 16px; }
.calc-tab:hover { color: var(--uni-ink); }
.calc-tab.is-active {
color: var(--uni-ink);
border-bottom-color: var(--uni-accent);
}
.calc-tab-count {
font-size: 11px;
font-weight: 700;
color: var(--uni-muted);
background: var(--uni-card);
border: 1px solid var(--uni-border);
border-radius: var(--radius-sharp, 4px);
padding: 0 6px;
min-width: 18px;
text-align: center;
}
.calc-tab.is-active .calc-tab-count {
color: var(--uni-ink);
border-color: var(--uni-accent);
}
.calc-panel[hidden] { display: none; }
.calc-table .calc-detail {
color: var(--uni-muted);
white-space: normal;
}
/* --- Zebra + legolcsóbb sor kiemelése --- */
.uni-table tbody tr.calc-row-alt {
background-color: rgba(64, 52, 30, 0.04);
}
.uni-table tbody tr.is-cheapest {
background-color: rgba(191, 176, 138, 0.18);
box-shadow: inset 3px 0 0 var(--uni-accent);
}
.uni-table tbody tr.calc-row-alt:hover,
.uni-table tbody tr.is-cheapest:hover {
background-color: rgba(64, 52, 30, 0.07);
}
/* A modell-név sora: a név + (csak a legolcsóbbnál) a jelvény EGY sorban,
függőlegesen középre. A jelvény tömör, hogy a sor magassága ne nőjön —
így a kiemelt táblasor ugyanakkora, mint a többi. */
.calc-name-line {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* „Legolcsóbb neked" jelvény — a NÉV mögött, az első sorban; csak a
kiemelt soron látszik. line-height:1 → nem feszíti szét a sort. */
.calc-best-badge {
display: none;
align-items: center;
gap: 4px;
padding: 2px 7px;
font-size: 10px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
color: #6f6033;
background: rgba(191, 176, 138, 0.30);
border-radius: 4px;
}
.calc-best-badge i {
width: 12px;
height: 12px;
}
.is-cheapest .calc-best-badge {
display: inline-flex;
}
/* --- Kattintható, rendezhető oszlopfejléc (asc/desc) --- */
.calc-sortable {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: background-color 0.12s ease, color 0.12s ease;
}
.calc-sortable:hover {
background-color: rgba(191, 176, 138, 0.12);
color: var(--uni-ink);
}
.calc-sortable:focus-visible {
outline: 2px solid var(--uni-accent);
outline-offset: -2px;
}
.calc-th-label {
display: inline-flex;
align-items: center;
gap: 5px;
}
.calc-sort-ico {
font-size: 10px;
line-height: 1;
color: var(--steel-300);
font-weight: 700;
}
.calc-sortable.is-sorted {
color: var(--uni-ink);
}
.calc-sortable.is-sorted .calc-sort-ico {
color: var(--uni-accent);
font-size: 11px;
}
.calc-sort-hint {
display: inline-flex;
align-items: center;
gap: 5px;
align-self: center;
font-size: 11.5px;
color: var(--uni-muted);
}
.calc-sort-hint i {
width: 14px;
height: 14px;
}
/* --- Üres állapot (nincs szűrő-találat) --- */
.calc-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 44px 20px;
text-align: center;
color: var(--uni-muted);
font-size: 14px;
}
.calc-empty i {
width: 28px;
height: 28px;
color: var(--uni-muted);
}
@media (max-width: 640px) {
.calc-input { font-size: 17px; }
.calc-count { margin-left: 0; flex-basis: 100%; }
.calc-sort-hint { flex-basis: 100%; }
/* A táblázat-kártya ÉLRE FUT → keskeny kijelzőn a teljes szélességet
kapja. Minden .uni-page-tábla profitál belőle (kalkulátor, unicornok,
változások), nem csak ez az oldal. */
.uni-table-wrap {
margin-inline: calc(50% - 50vw);
border-left: none;
border-right: none;
border-radius: 0;
}
}
/* Telefonon a lényeg a MODELL + HAVI KÖLTSÉG (a „mennyibe kerül" válasz).
A másodlagos oszlopok (árak, kontextus, részlet — .calc-col-secondary)
lemennek; a modell + havi költség marad, teljes szélességben, vízszintes
görgetés nélkül. OSZTÁLY-alapú elrejtés (nem nth-child), így a modalitásonként
VÁLTOZÓ oszlopszám sem töri el. */
@media (max-width: 560px) {
.calc-table .calc-col-secondary { display: none; }
.calc-table th, .calc-table td { padding: 11px 9px; font-size: 13px; }
.calc-table .uni-th-rank,
.calc-table td:first-child { width: 26px; padding-left: 8px; padding-right: 4px; }
.calc-table th:nth-child(2) { padding-left: 6px; }
.calc-table .uni-company { min-width: 0; gap: 9px; }
.calc-table .calc-cost { font-size: 15px; font-weight: 800; white-space: nowrap; }
.calc-table .calc-best-badge { font-size: 9px; padding: 1px 5px; gap: 3px; }
.calc-table .calc-best-badge i { width: 10px; height: 10px; }
/* A modalitás-fülek keskenyen görgethető sávban */
.calc-tabs { flex-wrap: nowrap; overflow-x: auto; }
.calc-tab { white-space: nowrap; }
}
/* Unicorn rangsor: 30 napos trend-sparkline az értékelés alatt */
.uni-spark {
display: block;
margin-top: 4px;
line-height: 0;
opacity: 0.9;
}
.uni-spark svg { display: inline-block; }
@media (max-width: 640px) {
.uni-spark { display: none; } /* mobilon a szám a lényeg, a trend a buboréktérképen él */
}
/* ============================================================
404 OLDAL (404.php)
Fekete fém hero (a fejléc formanyelve) óriás pezsgő 404-gyel,
alatta a cikk-aside-block kártyák (közös komponens, 07-articles).
============================================================ */
/* A .page-hero full-bleed sávját örökli, csak a felülete vált feketére:
felső pezsgő fém-csík + lágy derengés + a közös --header-metal gradiens. */
.nf-hero {
background:
var(--metallic-streak-on-dark) top center / 58% 2px no-repeat,
radial-gradient(ellipse 45% 100% at 50% 0%,
rgba(191, 176, 138, 0.16) 0%,
rgba(191, 176, 138, 0.03) 60%,
transparent 78%) top center / 100% 28px no-repeat,
var(--header-metal);
border-bottom: 1px solid rgba(191, 176, 138, 0.35);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.nf-hero-inner {
display: flex;
align-items: center;
gap: clamp(28px, 5vw, 72px);
max-width: 1200px;
margin: 0 auto;
}
/* Óriás 404 — pezsgő fém gradiens-szöveg, lágy ragyogással */
.nf-code {
flex-shrink: 0;
font-family: 'Outfit', sans-serif;
font-size: clamp(96px, 16vw, 176px);
font-weight: 850;
line-height: 0.85;
letter-spacing: -0.05em;
background: linear-gradient(180deg, #ecdcb5 0%, #bfb08a 48%, #8a7a55 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45))
drop-shadow(0 0 26px rgba(191, 176, 138, 0.22));
user-select: none;
}
.nf-hero-body { min-width: 0; }
.nf-hero h1 { color: #ffffff; }
.nf-hero p {
color: var(--charcoal-text);
max-width: 60ch;
}
/* Kereső a sötét hero-ban: sötét üveg-mező + pezsgő CTA gomb */
.nf-search-form {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: stretch;
margin-top: 20px;
max-width: 560px;
}
.nf-search-field {
flex: 1 1 280px;
display: flex;
align-items: center;
gap: 10px;
height: var(--btn-h);
padding: 0 14px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-sharp, 4px);
cursor: text;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nf-search-field:focus-within {
border-color: var(--accent-on-dark);
box-shadow: 0 0 0 3px var(--accent-on-dark-soft);
}
.nf-search-field i,
.nf-search-field svg {
width: 18px;
height: 18px;
color: var(--charcoal-text);
flex-shrink: 0;
}
.nf-search-field input {
flex: 1;
min-width: 0;
height: 100%;
background: transparent;
border: none;
outline: none;
box-shadow: none;
color: #ffffff;
font-size: 15px;
font-family: inherit;
padding: 0;
}
.nf-search-field input::placeholder {
color: var(--charcoal-text);
opacity: 0.7;
}
.nf-search-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: var(--btn-h);
padding: 0 22px;
border: none;
border-radius: var(--radius-sharp, 4px);
background: #bfb08a;
color: #161513;
font-size: 14px;
font-weight: 800;
font-family: inherit;
cursor: pointer;
box-shadow: var(--btn-gloss);
transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.nf-search-btn:hover {
filter: brightness(1.05);
box-shadow: var(--btn-gloss-hover);
}
.nf-search-btn i,
.nf-search-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Gyorslinkek — szellem-pillek, hoverre pezsgő kitöltés sötét szöveggel */
.nf-quick {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.nf-quick a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
border-radius: var(--radius-sharp, 4px);
border: 1px solid rgba(191, 176, 138, 0.35);
background: rgba(255, 255, 255, 0.04);
color: var(--charcoal-text);
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.nf-quick a:hover {
background: var(--accent-on-dark);
border-color: var(--accent-on-dark);
color: #161513;
}
.nf-quick i,
.nf-quick svg {
width: 14px;
height: 14px;
}
/* Tartalom-rács a hero alatt: friss cikkek + kategória-csempék */
.nf-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
align-items: start;
}
.nf-article-list {
list-style: none;
margin: 0;
padding: 6px 16px 12px;
}
.nf-article-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--steel-100);
}
.nf-article-list li:last-child { border-bottom: none; }
.nf-article-list .article-badge { flex-shrink: 0; }
.nf-article-link {
flex: 1;
min-width: 0;
color: var(--steel-800);
font-weight: 600;
font-size: 14px;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.15s ease;
}
.nf-article-link:hover { color: #000000; }
.nf-article-meta {
flex-shrink: 0;
font-size: 12px;
color: var(--steel-400);
font-variant-numeric: tabular-nums;
}
.nf-cats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 14px 16px 16px;
}
.nf-cat {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: linear-gradient(180deg, #ffffff 0%, var(--bg-card) 100%);
border: 1px solid var(--steel-100);
border-left: 3px solid var(--nf-accent, var(--uni-accent));
border-radius: var(--radius-sharp, 4px);
color: var(--steel-800);
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.nf-cat:hover {
transform: translateY(-1px);
border-color: var(--nf-accent, var(--uni-accent));
box-shadow: var(--shadow-card-hover);
color: var(--steel-900);
}
.nf-cat i,
.nf-cat svg {
width: 17px;
height: 17px;
color: var(--nf-accent, var(--uni-accent));
flex-shrink: 0;
}
/* Kategória-akcentek (korábban inline --nf-accent a markupban) */
.nf-cat--hirek { --nf-accent: var(--cat-hirek); }
.nf-cat--penz { --nf-accent: var(--cat-penz); }
.nf-cat--modellek { --nf-accent: var(--cat-modellek); }
.nf-cat--promptok { --nf-accent: var(--cat-promptok); }
@media (max-width: 900px) {
.nf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.nf-hero-inner {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.nf-cats { grid-template-columns: 1fr; }
}
/* ============================================================
AI VÁLTOZÁS-CHANGELOG (ai-valtozasok.php)
============================================================ */
.chg-list {
list-style: none;
margin: 0;
padding: 0;
}
.chg-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 0;
border-bottom: 1px solid var(--steel-100);
}
.chg-item:last-child { border-bottom: none; }
.chg-main { flex: 1; min-width: 0; }
.chg-head-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.chg-model {
font-weight: 700;
color: var(--steel-900);
text-decoration: none;
}
.chg-model:hover { color: var(--accent-orange); }
.chg-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 4px;
}
.chg-badge i, .chg-badge svg { width: 12px; height: 12px; }
.chg-badge--drop { background: rgba(15, 123, 79, 0.10); color: #0f7b4f; }
.chg-badge--up { background: rgba(194, 48, 16, 0.10); color: #1b1917; }
.chg-badge--version { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }
.chg-detail {
font-size: 13.5px;
color: var(--steel-500);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.chg-old { text-decoration: line-through; color: var(--steel-400); }
.chg-new { font-weight: 700; color: var(--steel-800); }
.chg-arrow { width: 13px; height: 13px; color: var(--steel-300); }
/* Stat-sáv címke linkként (pl. változás-számláló → changelog oldal) */
.page-summary-link {
color: inherit;
text-decoration: none;
}
.page-summary-link:hover { color: #bfb08a; }
/* ============================================================
AI-GLOSSZÁRIUM (ai-glosszarium.php)
Ragadós szűrő+index sáv, pezsgő betű-medálos szekciók,
horgony-linkek, közösségi javaslat panel.
============================================================ */
.gloss-hero-link {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #bfb08a;
text-underline-offset: 3px;
}
/* --- Ragadós eszköztár: szűrő + betű-index egyben --- */
.gloss-toolbar {
position: sticky;
top: 96px; /* a ragadós fejléc alá */
z-index: 50;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin-bottom: 30px;
padding: 12px 14px;
background: linear-gradient(180deg, #ffffff 0%, var(--bg-card) 100%);
border: 1px solid rgba(191, 176, 138, 0.30);
border-radius: var(--radius-sharp, 4px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 6px 18px rgba(27, 25, 23, 0.07);
}
.gloss-filter-wrap {
position: relative;
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 300px;
min-width: 0;
height: 38px;
padding: 0 12px;
background: #ffffff;
border: 1px solid var(--steel-200);
border-radius: 4px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gloss-filter-wrap:focus-within {
border-color: #bfb08a;
box-shadow: 0 0 0 3px rgba(191, 176, 138, 0.18);
}
.gloss-filter-wrap i,
.gloss-filter-wrap svg {
width: 16px;
height: 16px;
color: var(--steel-400);
flex-shrink: 0;
}
.gloss-filter {
flex: 1;
min-width: 0;
height: 100%;
border: none;
outline: none;
box-shadow: none;
background: transparent;
font-size: 14px;
font-family: inherit;
color: var(--steel-900);
padding: 0;
}
.gloss-filter-count {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
color: var(--steel-400);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.gloss-index {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.gloss-index a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 7px;
font-size: 13px;
font-weight: 750;
color: var(--steel-600);
border: 1px solid var(--steel-200);
border-radius: 4px;
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.gloss-index a:hover {
border-color: #bfb08a;
color: var(--steel-900);
background: rgba(191, 176, 138, 0.10);
}
.gloss-index a.is-active {
background: var(--charcoal);
border-color: var(--charcoal);
color: #ffffff;
}
/* --- Üres szűrés állapot --- */
.gloss-empty {
display: flex;
align-items: center;
gap: 12px;
padding: 26px 22px;
margin-bottom: 30px;
background: var(--bg-card);
border: 1px dashed var(--steel-200);
border-radius: var(--radius-sharp, 4px);
color: var(--steel-500);
font-size: 14px;
}
.gloss-empty i, .gloss-empty svg { width: 22px; height: 22px; color: var(--steel-300); flex-shrink: 0; }
.gloss-empty p { margin: 0; }
.gloss-empty a { color: var(--accent-orange); font-weight: 700; }
/* --- Betű-szekciók: pezsgő medál + vésett vonal --- */
.gloss-group { margin-bottom: 34px; }
.gloss-letter-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 6px;
}
.gloss-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
font-size: 22px;
font-weight: 850;
color: #161513;
background: #bfb08a;
border: 1px solid #a3936c;
border-radius: var(--radius-sharp, 4px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -2px 3px rgba(0, 0, 0, 0.12),
0 2px 6px rgba(27, 25, 23, 0.12);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.gloss-letter-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(191, 176, 138, 0.55), rgba(191, 176, 138, 0.08));
}
.gloss-letter-count {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--steel-400);
}
/* --- Fogalom-elemek: kártyás hover, horgony, :target kiemelés --- */
.gloss-list { margin: 0; }
.gloss-item {
padding: 14px 12px;
margin: 0 -12px;
border-bottom: 1px solid var(--steel-100);
border-left: 3px solid transparent;
border-radius: 4px;
transition: background 0.15s ease, border-color 0.15s ease;
scroll-margin-top: 170px; /* horgonyra ugrásnál a ragadós sávok alá */
}
.gloss-item:last-child { border-bottom-color: transparent; }
.gloss-item:hover {
background: rgba(191, 176, 138, 0.07);
}
.gloss-item:target {
background: rgba(191, 176, 138, 0.12);
border-left-color: #bfb08a;
}
.gloss-item dt {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-weight: 750;
color: var(--steel-900);
margin-bottom: 4px;
}
.gloss-anchor {
color: var(--steel-300);
font-weight: 800;
text-decoration: none;
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease;
}
.gloss-item:hover .gloss-anchor,
.gloss-item:target .gloss-anchor { opacity: 1; }
.gloss-anchor:hover { color: var(--accent-orange); }
.gloss-community-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6e6148;
background: rgba(191, 176, 138, 0.16);
border: 1px solid rgba(191, 176, 138, 0.40);
border-radius: 4px;
}
.gloss-community-badge i,
.gloss-community-badge svg { width: 11px; height: 11px; }
.gloss-item dd {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: var(--steel-500);
max-width: 76ch;
}
/* --- Közösségi javaslat panel: prémium kártya pezsgő fém-csíkkal --- */
.gloss-suggest {
margin-top: 46px;
padding: 26px 26px 24px;
background:
var(--metallic-streak) top center / 70% 2px no-repeat,
radial-gradient(ellipse 50% 100% at 50% 0%,
rgba(191, 176, 138, 0.14) 0%,
rgba(191, 176, 138, 0.02) 60%,
transparent 78%) top center / 100% 24px no-repeat,
linear-gradient(180deg, #ffffff 0%, var(--bg-card) 100%);
border: 1px solid rgba(191, 176, 138, 0.35);
border-radius: var(--radius-sharp, 4px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 6px 20px rgba(27, 25, 23, 0.06);
scroll-margin-top: 120px;
}
.gloss-suggest-eyebrow {
display: inline-block;
margin-bottom: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #bfae88;
}
.gloss-suggest-head h2 {
font-size: 22px;
font-weight: 800;
color: var(--steel-900);
margin: 0 0 8px;
}
.gloss-suggest-head p {
margin: 0 0 20px;
font-size: 14px;
color: var(--steel-500);
max-width: 68ch;
}
.gloss-suggest-form {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 640px;
}
.gloss-suggest-field {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.gloss-suggest-field label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--steel-500);
}
.gloss-suggest-hint {
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--steel-400);
}
.gloss-suggest-field input,
.gloss-suggest-field textarea {
width: 100%;
padding: 10px 12px;
font-size: 14px;
font-family: inherit;
color: var(--steel-900);
background: #ffffff;
border: 1px solid var(--steel-200);
border-radius: 4px;
outline: none;
box-sizing: border-box;
resize: vertical;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gloss-suggest-field input:focus,
.gloss-suggest-field textarea:focus {
border-color: #bfb08a;
box-shadow: 0 0 0 3px rgba(191, 176, 138, 0.18);
}
.gloss-suggest-counter {
align-self: flex-end;
font-size: 11px;
color: var(--steel-400);
font-variant-numeric: tabular-nums;
}
.gloss-suggest-actions { display: flex; }
.gloss-suggest-msg {
padding: 12px 14px;
border-radius: 4px;
font-size: 13.5px;
font-weight: 600;
border: 1px solid transparent;
}
.gloss-suggest-msg.is-success {
background: var(--success-soft);
color: var(--success);
border-color: rgba(21, 128, 61, 0.25);
}
.gloss-suggest-msg.is-pending {
background: rgba(191, 176, 138, 0.14);
color: #6e6148;
border-color: rgba(191, 176, 138, 0.40);
}
.gloss-suggest-msg.is-error {
background: var(--danger-soft);
color: var(--danger);
border-color: rgba(214, 52, 26, 0.25);
}
.gloss-suggest-login {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.gloss-suggest-login i,
.gloss-suggest-login svg { width: 20px; height: 20px; color: var(--steel-400); flex-shrink: 0; }
.gloss-suggest-login p { margin: 0; font-size: 14px; color: var(--steel-500); flex: 1 1 280px; }
@media (max-width: 720px) {
.gloss-toolbar { position: static; }
.gloss-item { scroll-margin-top: 90px; }
}
/* ============================================================
AI ÖSSZEHASONLÍTÓ (ai-osszehasonlitas.php)
Modell-választó sáv + egymás melletti összehasonlító táblázat.
============================================================ */
.cmp-picker {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 26px;
padding: 16px;
background:
var(--metallic-streak) top center / 70% 2px no-repeat,
linear-gradient(180deg, #ffffff 0%, var(--bg-card) 100%);
border: 1px solid rgba(191, 176, 138, 0.35);
border-radius: var(--radius-sharp, 4px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 5px 16px rgba(27, 25, 23, 0.06);
}
.cmp-picker-slot {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 180px;
min-width: 0;
}
.cmp-picker-slot label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--steel-500);
}
.cmp-optional {
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--steel-400);
}
.cmp-select {
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 14px;
font-family: inherit;
font-weight: 600;
color: var(--steel-900);
background: #ffffff;
border: 1px solid var(--steel-200);
border-radius: 4px;
outline: none;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cmp-select:focus {
border-color: #bfb08a;
box-shadow: 0 0 0 3px rgba(191, 176, 138, 0.18);
}
.cmp-vs {
align-self: center;
margin-top: 16px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.04em;
color: #161513;
background: #bfb08a;
border: 1px solid #a3936c;
border-radius: var(--radius-sharp, 4px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -2px 3px rgba(0, 0, 0, 0.12);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cmp-share-btn {
align-self: center;
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 7px;
height: 40px;
padding: 0 16px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
color: var(--steel-700);
background: #ffffff;
border: 1px solid rgba(191, 176, 138, 0.45);
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cmp-share-btn:hover {
border-color: #bfb08a;
color: var(--steel-900);
box-shadow: 0 2px 8px rgba(191, 176, 138, 0.20);
}
.cmp-share-btn i,
.cmp-share-btn svg { width: 15px; height: 15px; color: #a3936c; }
/* --- Táblázat --- */
.cmp-table-wrap {
overflow-x: auto;
background: var(--bg-card);
border: 1px solid var(--steel-100);
border-radius: var(--radius-sharp, 4px);
box-shadow: var(--shadow-card);
}
.cmp-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
min-width: 640px;
}
.cmp-table th[scope="row"] {
width: 168px;
padding: 14px 16px;
text-align: left;
vertical-align: top;
font-size: 13px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--steel-500);
background: var(--bg-card-alt);
border-bottom: 1px solid var(--steel-100);
border-right: 1px solid rgba(191, 176, 138, 0.30);
position: sticky;
left: 0;
z-index: 2;
}
.cmp-table th[scope="row"] i,
.cmp-table th[scope="row"] svg {
width: 14px;
height: 14px;
color: #a3936c;
vertical-align: -2px;
margin-right: 7px;
}
.cmp-table td {
padding: 14px 16px;
vertical-align: top;
font-size: 13.5px;
line-height: 1.55;
color: var(--steel-600);
border-bottom: 1px solid var(--steel-100);
border-left: 1px solid var(--steel-100);
}
.cmp-table tr:last-child td,
.cmp-table tr:last-child th { border-bottom: none; }
/* Fejléc-sor: sötét „prémium" sáv — pezsgő modell-név + monospace ID.
(A Morph-mintából: mérnöki, letisztult; a modell-ID technikai érzetet ad.) */
.cmp-head-row td {
background: #161616;
border-left-color: #2a2a2a;
border-bottom: 1px solid #2a2a2a;
padding-top: 16px;
padding-bottom: 16px;
}
.cmp-head-row th[scope="row"] {
background: #161616;
border-right-color: #2a2a2a;
border-bottom-color: #2a2a2a;
}
.cmp-model-head {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
min-width: 0;
}
.cmp-model-head img {
width: 42px;
height: 42px;
object-fit: contain;
background: #ffffff;
border: 1px solid #2f2f2f;
border-radius: var(--radius-sharp, 4px);
padding: 4px;
flex-shrink: 0;
}
.cmp-model-initials {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex-shrink: 0;
font-size: 14px;
font-weight: 700;
color: var(--accent-on-dark, #bfb08a);
background: #242424;
border: 1px solid #333333;
border-radius: var(--radius-sharp, 4px);
}
.cmp-model-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cmp-model-name {
font-size: 15px;
font-weight: 700;
color: var(--accent-on-dark, #bfb08a); /* pezsgő a sötét fejlécen */
line-height: 1.2;
}
.cmp-model-head:hover .cmp-model-name { color: #e9dcbb; }
.cmp-model-id {
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 11px;
color: rgba(236, 231, 219, 0.5);
line-height: 1.2;
word-break: break-all;
}
/* Cellatartalmak */
.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
font-size: 11.5px;
font-weight: 700;
color: var(--steel-600);
background: #ffffff;
border: 1px solid var(--steel-200);
border-radius: 4px;
white-space: nowrap;
}
.cmp-chip i, .cmp-chip svg { width: 12px; height: 12px; color: #a3936c; }
.cmp-list {
margin: 0;
padding: 0 0 0 16px;
}
.cmp-list li { margin-bottom: 4px; }
.cmp-list li:last-child { margin-bottom: 0; }
.cmp-list--pros li::marker { content: "+ "; color: var(--success); font-weight: 800; }
.cmp-list--cons li::marker { content: "– "; color: var(--danger); font-weight: 800; }
.cmp-price {
font-size: 17px;
font-weight: 800;
color: var(--steel-900);
font-variant-numeric: tabular-nums;
}
.cmp-price.is-best { color: var(--steel-900); }
.cmp-price-meta {
display: block;
font-size: 11.5px;
color: var(--steel-400);
margin-top: 2px;
}
.cmp-best-badge,
.cmp-free-badge {
display: inline-flex;
align-items: center;
margin-top: 6px;
padding: 2px 8px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 4px;
}
.cmp-best-badge {
color: var(--steel-900);
background: rgba(191, 176, 138, 0.18);
border: 1px solid rgba(191, 176, 138, 0.45);
}
.cmp-free-badge {
color: var(--success);
background: var(--success-soft);
border: 1px solid rgba(21, 128, 61, 0.25);
margin-right: 8px;
}
.cmp-muted { color: var(--steel-300); }
.cmp-ctx-val {
font-size: 15px;
font-weight: 700;
color: var(--steel-900);
font-variant-numeric: tabular-nums;
}
/* Nyertes cella kiemelése — pezsgő tint + bal éles pezsgő sáv */
.cmp-cell-win {
background: rgba(191, 176, 138, 0.16);
box-shadow: inset 3px 0 0 #bfb08a;
}
/* --- Auto-összegzés sáv (a táblázat felett) --- */
.cmp-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 18px;
padding: 12px 14px;
background: var(--bg-card-alt);
border: 1px solid var(--steel-100);
border-radius: var(--radius-sharp, 4px);
}
.cmp-summary:empty { display: none; }
.cmp-sum-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--steel-500);
margin-right: 2px;
}
.cmp-sum-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: var(--steel-900);
background: #ffffff;
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp, 4px);
padding: 5px 10px;
}
.cmp-sum-chip b {
font-weight: 600;
color: var(--steel-500);
}
.cmp-sum-chip i, .cmp-sum-chip svg {
width: 14px;
height: 14px;
color: #a3936c;
}
.cmp-cta {
display: inline-flex;
align-items: center;
padding: 7px 14px;
font-size: 12.5px;
font-weight: 800;
color: #ffffff;
background: var(--charcoal);
border-radius: 4px;
text-decoration: none;
transition: background 0.15s ease;
}
.cmp-cta:hover { background: var(--charcoal-hover); color: #ffffff; }
.cmp-link {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 7px 14px;
font-size: 12.5px;
font-weight: 700;
color: var(--steel-700);
background: #ffffff;
border: 1px solid rgba(191, 176, 138, 0.45);
border-radius: 4px;
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease;
}
.cmp-link:hover { border-color: #bfb08a; color: var(--steel-900); }
.cmp-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 18px;
font-size: 12.5px;
color: var(--steel-400);
max-width: 76ch;
}
.cmp-note i, .cmp-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: #a3936c; }
.cmp-note a { color: var(--accent-orange); font-weight: 700; }
@media (max-width: 720px) {
.cmp-vs { display: none; }
/* MOBIL: a táblázat NEM vízszintesen görgethető (csúszka), hanem
átrendeződik. Minden sornál a címke teljes szélességű fejléc-sávvá
válik, a modellek pedig ALATTA, egymás mellett — így egy pillantással
összevethetők, kicsúszás és görgetés nélkül. A DOM változatlan
marad (a JS ugyanazt építi), csak a megjelenítést kapcsoljuk blokk-módra. */
.cmp-table-wrap { overflow-x: visible; }
.cmp-table {
display: block;
min-width: 0;
table-layout: auto;
}
.cmp-table tbody { display: block; }
.cmp-table tr {
display: flex;
flex-wrap: wrap;
border-bottom: 2px solid var(--steel-100);
}
.cmp-table tr:last-child { border-bottom: none; }
/* Címke: teljes szélességű sáv a modell-cellák fölött (a sticky-left ki) */
.cmp-table th[scope="row"] {
flex: 0 0 100%;
width: auto;
position: static;
padding: 9px 13px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
border-right: none;
border-bottom: 1px solid var(--steel-100);
}
/* Modell-cellák: egyenlő arányban egymás mellett, nem egymás alatt.
Az overflow-wrap KULCS: 3 modellnél a cella ~100px, és a hosszú magyar
szavak (pl. „elismertsége") enélkül kilógnának a keret mögé. */
.cmp-table td {
flex: 1 1 0;
min-width: 0;
padding: 12px 13px;
border-left: none;
border-bottom: none;
overflow-wrap: anywhere;
}
.cmp-table td + td { border-left: 1px solid var(--steel-100); }
.cmp-list li,
.cmp-model-id,
.cmp-price-meta { overflow-wrap: anywhere; }
/* Fejléc-sor (logó + név): az üres címkét elrejtjük, a modell-fejek
egymás mellett maradnak — ez lesz a tábla „fejléce". */
.cmp-head-row th[scope="row"] { display: none; }
.cmp-head-row td + td { border-left-color: #2a2a2a; }
.cmp-model-head { flex-direction: column; align-items: flex-start; gap: 7px; }
.cmp-model-head img,
.cmp-model-initials { width: 34px; height: 34px; }
.cmp-model-name { font-size: 13.5px; }
/* A nyertes-kiemelés és a listák maradnak, csak szűkebb cellában */
.cmp-list { padding-left: 16px; }
.cmp-best-badge { display: inline-block; margin-top: 4px; }
/* A kategória-chip alapból egysoros (nowrap) — szűk cellában kilógna;
mobilon hagyjuk tördelni, hogy semmi ne csússzon a keret mögé. */
.cmp-chip { white-space: normal; overflow-wrap: anywhere; }
}
/* ============================================================
MAGYAR AI RADAR — /ai-radar (ai-radar.php)
Az unikornis-oldal mintájára: uni-* osztályokat hasznosít újra,
itt csak a Radar-specifikus részek élnek (idővonal, naptár, kereső).
============================================================ */
/* ==========================================================================
PUBLIKUS AI-RANGSOR (/ai-rangsor)
A unicornis-oldal uni-table rendszerére épül — itt csak a rangsor-specifikus
oszlopok és jelölések élnek.
========================================================================== */
.rangsor-note {
margin: -6px 0 14px;
font-size: 13px;
line-height: 1.5;
color: var(--steel-400);
}
.rangsor-name {
font-weight: 650;
color: var(--steel-900);
}
/* Modell-cella: logó + név. A logó egyben a „van róla adatlapunk" jelzés is. */
.rangsor-model {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.rangsor-logo {
width: 26px;
height: 26px;
flex: 0 0 auto;
border-radius: var(--radius-sharp, 4px);
object-fit: contain;
background: #ffffff;
border: 1px solid var(--steel-200, #d3cec6);
padding: 2px;
}
.rangsor-logo--initials {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(191, 176, 138, 0.20);
border-color: rgba(191, 176, 138, 0.55);
color: #6e6148;
font-size: 12px;
font-weight: 800;
}
/* Üres helyőrző, hogy a nevek egy vonalban kezdődjenek */
.rangsor-logo--empty {
background: transparent;
border-color: transparent;
}
/* Név + gondolkodási szint egy cellában */
.rangsor-model-text {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
/* A zárójeles utótag (max / xhigh / high) — beállítás, nem külön modell */
.rangsor-qual {
display: inline-block;
padding: 1px 6px;
border: 1px solid var(--steel-200, #d3cec6);
border-radius: 4px;
background: var(--steel-50, #efede9);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: lowercase;
color: var(--steel-500);
white-space: nowrap;
}
/* Jelmagyarázat a táblázat alatt */
.rangsor-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
margin: 12px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--steel-500);
}
.rangsor-legend-item {
display: inline-flex;
align-items: center;
gap: 7px;
}
.rangsor-legend-swatch {
width: 18px;
height: 12px;
flex: 0 0 auto;
border-radius: var(--radius-sharp, 4px);
background: rgba(191, 176, 138, 0.30);
border: 1px solid rgba(191, 176, 138, 0.55);
}
.rangsor-legend strong { color: var(--steel-700); }
.rangsor-score {
font-variant-numeric: tabular-nums;
font-weight: 650;
}
/* Teljesítmény-oszlopok (sebesség, ár) — csak ott jelennek meg, ahol a forrás
méri. Halványabb a fő pontszámnál: az a rangsor tengelye, ezek kiegészítők. */
.rangsor-col-perf {
font-variant-numeric: tabular-nums;
color: var(--steel-600, #56504a);
white-space: nowrap;
}
.rangsor-unit {
font-size: 11px;
color: var(--steel-400, #8b847a);
}
/* A saját katalógusunkban is meglévő modell sora — halvány pezsgő kiemelés */
.rangsor-row--ours {
background: rgba(191, 176, 138, 0.10);
}
.rangsor-move {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
}
.rangsor-move i,
.rangsor-move svg { width: 13px; height: 13px; }
.rangsor-move--up { color: #15803d; }
.rangsor-move--down { color: #b4453d; }
.rangsor-move--flat { color: var(--steel-300, #b4aea4); }
.rangsor-move--new {
padding: 2px 8px;
border-radius: var(--radius-sharp, 4px);
background: rgba(191, 176, 138, 0.20);
border: 1px solid rgba(191, 176, 138, 0.55);
color: #6e6148;
font-size: 11px;
letter-spacing: 0.03em;
}
.rangsor-col-link { text-align: right; }
.rangsor-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border: 1px solid var(--steel-200, #d3cec6);
border-radius: var(--radius-sharp, 4px);
font-size: 12.5px;
font-weight: 600;
color: var(--steel-900);
text-decoration: none;
white-space: nowrap;
transition: border-color 0.15s ease, background 0.15s ease;
}
.rangsor-link:hover {
border-color: var(--accent-orange);
background: var(--accent-orange-soft);
}
.rangsor-link i,
.rangsor-link svg {
width: 12px;
height: 12px;
color: #8a7c56;
}
.rangsor-link:hover i,
.rangsor-link:hover svg { color: var(--accent-orange); }
.rangsor-link--none {
border: none;
padding: 0;
color: var(--steel-300, #b4aea4);
font-weight: 400;
font-size: 12px;
}
/* Kimenő link a gyártó / a forrás oldalára — olyan sorban, amihez nincs
adatlapunk. Szándékosan halványabb és keret nélküli: a saját adatlapra vivő
gomb marad az elsődleges út, ez csak a zsákutcát szünteti meg. */
.rangsor-link--ext {
border: none;
padding: 0;
color: var(--steel-500, #6f675e);
font-weight: 500;
font-size: 12px;
}
.rangsor-link--ext:hover {
background: none;
color: var(--steel-900);
text-decoration: underline;
text-underline-offset: 3px;
}
.rangsor-link--ext i,
.rangsor-link--ext svg {
width: 11px;
height: 11px;
color: var(--steel-300, #b4aea4);
}
.rangsor-link--ext:hover i,
.rangsor-link--ext:hover svg { color: var(--steel-600, #56504a); }
.rangsor-source {
margin: 4px 0 28px;
font-size: 12.5px;
line-height: 1.6;
color: var(--steel-400);
}
.rangsor-source a { color: var(--steel-900); }
@media (max-width: 900px) {
/* Szűkülésnél az ár megy először: a sebesség beszédesebb egy rangsorban */
.rangsor-col-price { display: none; }
}
@media (max-width: 720px) {
.rangsor-col-creator { display: none; }
.rangsor-col-perf { display: none; }
.rangsor-link {
padding: 4px 8px;
font-size: 12px;
}
}
@media (max-width: 480px) {
.rangsor-col-move { display: none; }
}
/* Átvezető sáv a /magyar-ai oldalon a Radarra: fejléc-fekete panel,
mini trikolór + pezsgő CTA. A hu-flag-mini a 07-articles.css-ben él. */
.huai-radar-band {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 28px;
padding: 16px 20px;
border: 1px solid rgba(191, 176, 138, 0.35);
border-radius: var(--radius-sharp, 4px);
background: #161616;
text-decoration: none;
transition: border-color 0.15s ease;
}
.huai-radar-band:hover {
border-color: rgba(191, 176, 138, 0.7);
}
.huai-radar-band .hu-flag-mini {
flex-shrink: 0;
width: 22px;
height: 15px;
}
.huai-radar-band-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.huai-radar-band-eyebrow {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #a3936c;
}
.huai-radar-band-title {
font-size: 14.5px;
font-weight: 700;
line-height: 1.4;
color: #ece7db;
}
.huai-radar-band-cta {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
margin-left: auto;
padding: 8px 14px;
border: 1px solid rgba(191, 176, 138, 0.45);
border-radius: var(--radius-sharp, 4px);
font-size: 12.5px;
font-weight: 700;
color: #bfb08a;
transition: background 0.15s ease, color 0.15s ease;
}
.huai-radar-band:hover .huai-radar-band-cta {
background: #bfb08a;
color: #161616;
}
.huai-radar-band-cta i,
.huai-radar-band-cta svg {
width: 14px;
height: 14px;
}
@media (max-width: 640px) {
.huai-radar-band {
flex-wrap: wrap;
}
.huai-radar-band-cta {
margin-left: 36px;
}
}
.radar-updated {
display: inline-block;
margin-left: 10px;
font-size: 12.5px;
font-weight: 700;
color: #a3936c;
white-space: nowrap;
}
.radar-search-wrap {
flex: 1 1 220px;
justify-content: flex-end;
}
.radar-search {
width: 100%;
max-width: 280px;
height: 34px;
padding: 0 12px;
border: 1px solid rgba(163, 147, 108, 0.45);
border-radius: var(--radius-sharp, 4px);
background: #ffffff;
color: var(--uni-ink, #1b1917);
font-size: 13px;
}
.radar-search::placeholder {
color: var(--steel-400);
}
/* --- Radar-idővonal (a bubble map melletti oszlop) --- */
.radar-tl-empty {
margin: 10px 0 0;
font-size: 12.5px;
color: var(--steel-600);
}
.radar-tl-list {
list-style: none;
margin: 0;
padding: 0;
}
.radar-tl-item {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 8px;
padding: 8px 0;
border-bottom: 1px solid rgba(191, 176, 138, 0.14);
}
.radar-tl-item:last-child {
border-bottom: 0;
}
.radar-tl-date {
flex-shrink: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--steel-600);
}
/* A kategória-chipek és címek VILÁGOS uni-panelen ülnek — sötét tinta kell
(a korábbi világos pasztellek a sötét-felületi palettából jöttek, és a
törtfehér kártyán szinte láthatatlanok voltak). */
.radar-tl-cat {
flex-shrink: 0;
padding: 1px 7px;
border-radius: 4px;
font-size: 9.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(163, 147, 108, 0.20);
color: #6d5e3c;
}
.radar-tl-cat--uj-szereplo { background: rgba(78, 122, 99, 0.18); color: #3f6449; }
.radar-tl-cat--finanszirozas { background: rgba(163, 147, 108, 0.22); color: #6d5e3c; }
.radar-tl-cat--termek { background: rgba(61, 122, 140, 0.16); color: #2f6273; }
.radar-tl-cat--szabalyozas { background: rgba(125, 75, 69, 0.16); color: #8a453c; }
.radar-tl-cat--esemeny { background: rgba(91, 107, 125, 0.18); color: #45566b; }
.radar-tl-title {
display: block;
width: 100%;
font-size: 13px;
font-weight: 600;
line-height: 1.45;
color: var(--uni-ink, #1b1917);
text-decoration: none;
}
a.radar-tl-title:hover {
color: #a3936c;
}
/* --- Katalógus-tábla kiegészítők --- */
.radar-ceg-link {
color: inherit;
text-decoration: none;
font-weight: 700;
}
.radar-ceg-link:hover {
color: #a3936c;
}
.radar-ceg-leiras {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--steel-400);
max-width: 46ch;
}
/* --- Naptár blokk: konferenciák / pályázatok / szabályozás --- */
.radar-naptar-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.radar-naptar-item {
padding: 13px 15px;
border: 1px solid rgba(163, 147, 108, 0.35);
border-radius: var(--radius-sharp, 4px);
background: #ffffff;
box-shadow: 0 1px 3px rgba(64, 52, 30, 0.06);
}
.radar-naptar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 7px;
}
.radar-naptar-tipus {
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(163, 147, 108, 0.20);
color: #6d5e3c;
}
.radar-naptar-tipus--palyazat { background: rgba(78, 122, 99, 0.18); color: #3f6449; }
.radar-naptar-tipus--szabalyozas { background: rgba(125, 75, 69, 0.16); color: #8a453c; }
.radar-naptar-datum {
font-size: 11.5px;
font-weight: 700;
color: var(--steel-600);
}
.radar-naptar-nev {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--uni-ink, #1b1917);
text-decoration: none;
}
a.radar-naptar-nev:hover {
color: #a3936c;
}
.radar-naptar-leiras {
margin: 5px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--steel-600);
}
@media (max-width: 720px) {
.radar-search-wrap {
justify-content: flex-start;
}
.radar-search {
max-width: none;
}
}
/* ============================================================
VAULT — KÖVETETT TÉMÁID (értesítések) + KÖVETETT ENTITÁSOK
============================================================ */
.vault-follow-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.vault-notif-badge {
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 3px 8px;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: var(--charcoal, #161616);
background: var(--accent-on-dark, #bfb08a);
border-radius: var(--radius-sharp, 4px);
vertical-align: middle;
}
.vault-follow-readall-form { flex: 0 0 auto; width: auto; }
.vault-follow-readall-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
color: var(--steel-700);
background: transparent;
border: 1px solid var(--steel-200);
border-radius: var(--radius-sharp, 4px);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.vault-follow-readall-btn:hover {
border-color: var(--steel-400);
color: var(--steel-900);
background: var(--steel-50);
}
.vault-notif-item.is-unread {
border-left: 3px solid var(--accent-on-dark, #bfb08a);
}
.vault-notif-entities { font-weight: 600; }
.vault-notif-dot {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: var(--radius-sharp, 4px);
background: var(--accent-on-dark, #bfb08a);
}
.vault-follow-group + .vault-follow-group { margin-top: 14px; }
.vault-follow-group-label {
display: block;
margin-bottom: 6px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--steel-400);
}
.vault-follow-entity-main {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.vault-follow-entity-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 auto;
color: var(--steel-500);
background: var(--steel-50);
border: 1px solid var(--steel-100);
border-radius: var(--radius-sharp, 4px);
}
/* Követett entitás valódi logója (unicorns / ai_models készletből) */
.vault-follow-entity-logo {
width: 30px;
height: 30px;
flex: 0 0 auto;
object-fit: contain;
border-radius: var(--radius-sharp, 4px);
border: 1px solid var(--steel-100);
background: #ffffff;
padding: 3px;
}
/* ============================================================
VAULT ÚJRATERVEZÉS — eyebrow-hero + stat-sáv + kétoszlopos grid
(fő oszlop: követések/mentettek/promptok · oldalsáv: profil)
============================================================ */
.page-hero--vault .vault-hero-row {
display: flex;
align-items: center;
gap: 18px;
margin-top: 6px;
}
.vault-hero-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
flex: 0 0 auto;
border-radius: var(--radius-sharp, 4px);
overflow: hidden;
background: linear-gradient(180deg, #2e2e2e 0%, #171717 55%, #0d0d0d 100%);
border: 1px solid rgba(191, 176, 138, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 3px 10px rgba(13, 13, 13, 0.22);
color: var(--accent-on-dark);
}
.vault-hero-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vault-hero-avatar i,
.vault-hero-avatar svg {
width: 26px;
height: 26px;
}
.vault-hero-text { min-width: 0; }
.vault-hero-text h1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Kétoszlopos elrendezés: fő oszlop balra, profil-oldalsáv jobbra.
A grid-area miatt a forrás-sorrend (aside előbb) nem számít; mobilon
a fő oszlop kerül felülre. */
.vault-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
grid-template-areas: "main side";
gap: 24px;
align-items: start;
}
.vault-main {
grid-area: main;
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
.vault-side {
grid-area: side;
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
position: sticky;
top: 24px;
}
/* A kártya-közöket a grid gap adja — a régi margó itt nem kell */
.vault-layout .vault-card-gap { margin-top: 0; }
/* Profil-űrlap az oldalsávban: egy oszlopba rendezve */
.vault-side .profile-cols {
flex-direction: column;
gap: 24px;
}
.vault-side .profile-col-left {
padding-right: 0;
border-right: none;
border-bottom: 1px solid var(--steel-100);
padding-bottom: 24px;
}
@media (max-width: 1024px) {
.vault-layout {
grid-template-columns: 1fr;
grid-template-areas: "main" "side";
}
.vault-side {
position: static;
}
}
@media (max-width: 768px) {
.page-hero--vault .vault-hero-row {
flex-direction: column;
text-align: center;
gap: 10px;
}
.vault-hero-text h1 { white-space: normal; }
.vault-follow-head { flex-direction: column; align-items: stretch; }
.vault-follow-readall-btn { width: 100%; justify-content: center; }
}
/* Unicorn-táblázat ország-zászlója (korábban inline style a libben) */
.uni-flag-img {
width: 20px;
height: auto;
border-radius: 2px;
vertical-align: middle;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
display: inline-block;
margin-right: 4px;
}
/* Prompt-megosztó X (Twitter) ikon (korábban inline style) */
.share-x-icon {
width: 14px;
height: 14px;
display: block;
margin: auto;
}
/* Unicorn-oldal: a rangsor-táblázat korábbi inline style-jai osztályokként.
(A .uni-legend törzs-szabálya már flex-wrap-os — itt csak a sűrűbb gap él;
a .uni-country meglévő törzs-szabálya változatlanul érvényes.) */
.uni-legend--wrap {
gap: 8px 16px;
}
.uni-company-link {
color: inherit;
text-decoration: none;
font-weight: 700;
}
.uni-ext-icon {
width: 10px;
height: 10px;
margin-left: 2px;
vertical-align: middle;
opacity: 0.5;
}
.uni-valuation {
font-weight: 700;
color: var(--steel-900);
}
.uni-td-strong {
color: var(--steel-700);
font-weight: 500;
}
.uni-td-muted {
color: var(--steel-600);
font-weight: 500;
}