:root{
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    --ease-fast: 140ms cubic-bezier(.2,.8,.2,1);
    --ease-smooth: 220ms cubic-bezier(.2,.8,.2,1);
}

html{ scroll-behavior:auto !important; }
html,body{ min-height:100%; }

body{
    margin:0;
    font-family:var(--font-sans);
    font-size:15px;
    line-height:1.45;
    letter-spacing:-0.01em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    transition:
        background-color var(--ease-smooth),
        color var(--ease-smooth),
        border-color var(--ease-smooth),
        box-shadow var(--ease-smooth);
}

body,button,input,textarea,select{ font-family:var(--font-sans); }
a{ color:inherit; text-decoration:none; }
a:hover{ color:inherit; }
img{ max-width:100%; display:block; }
pre{ margin:0; }

/* =========================
   THEME TOKENS
   ========================= */
html[data-bs-theme="light"]{
    --app-bg: #f3f3f5;
    --app-bg-2: #ededf1;
    --surface-0: #ffffff;
    --surface-1: transparent;
    --surface-2: #f2f3f7;
    --surface-3: #ebecef;

    --text-1: #16181d;
    --text-2: #5e6473;
    --text-3: #8c91a0;

    --border-soft: rgba(28, 32, 41, .08);
    --border-strong: rgba(28, 32, 41, .12);

    --shadow-1: 0 2px 8px rgba(16, 18, 24, .04), 0 10px 24px rgba(16, 18, 24, .05);
    --shadow-2: 0 6px 18px rgba(16, 18, 24, .07), 0 20px 44px rgba(16, 18, 24, .07);
    --shadow-3: 0 10px 26px rgba(16, 18, 24, .08), 0 28px 64px rgba(16, 18, 24, .08);

    --primary: #6f52ed;
    --primary-2: #7e65f2;
    --primary-soft: rgba(111, 82, 237, .12);

    --success: #219c68;
    --success-soft: rgba(33, 156, 104, .12);

    --info: #2176FF;
    --info-soft: rgba(33, 150, 243, .12);

    --danger: #e85c75;
    --danger-soft: rgba(232, 92, 117, .12);

    --warning: #f0ad4e;
    --warning-soft: rgba(240, 173, 78, .12);

    --chip-bg: #f1f1f4;
    --chip-border: rgba(28, 32, 41, .06);
    --input-bg: #ffffff;

    --close-btn-color: invert(1);

    color-scheme: light;
}

html[data-bs-theme="dark"]{
    --app-bg: #090d12;
    --app-bg-2: #0d1117;
    --surface-0: #11161d;
    --surface-1: transparent;
    --surface-2: #181f29;
    --surface-3: #1d2530;

    --text-1: #f2f4f8;
    --text-2: #c1c7d2;
    --text-3: #8e97a7;

    --border-soft: rgba(255, 255, 255, .07);
    --border-strong: rgba(255, 255, 255, .11);

    --shadow-1: 0 2px 10px rgba(0,0,0,.22), 0 14px 30px rgba(0,0,0,.22);
    --shadow-2: 0 8px 20px rgba(0,0,0,.28), 0 24px 48px rgba(0,0,0,.28);
    --shadow-3: 0 12px 28px rgba(0,0,0,.34), 0 30px 70px rgba(0,0,0,.34);

    --primary: #8a73ff;
    --primary-2: #9987ff;
    --primary-soft: rgba(138, 115, 255, .16);

    --success: #35bf81;
    --success-soft: rgba(53, 191, 129, .16);

    --info: #2176FF;
    --info-soft: rgba(88, 166, 255, .16);

    --danger: #ff738b;
    --danger-soft: rgba(255, 115, 139, .16);

    --warning: #f2b654;
    --warning-soft: rgba(242, 182, 84, .16);

    --chip-bg: #1b212b;
    --chip-border: rgba(255, 255, 255, .05);
    --input-bg: #131922;

    --close-btn-color: invert(1);

    color-scheme: dark;
}

body{
    background: var(--app-bg);
    color: var(--text-1);
}

.color-light{ color:var(--text-2); }
.color-dark{ color:var(--text-1); }
.color-blue{ color:var(--info); }
.muted,.text-muted{ color:var(--text-3) !important; }

.hr-soft{
    margin:18px 0 22px;
    border:0;
    height:1px;
    background:var(--border-soft);
}

.app-shell{
    width:min(100%, 1220px);
    margin-inline:auto;
    padding-inline:24px;
}

/* =========================
   NAVBAR
   ========================= */
.navbar{
    position:sticky;
    top:0;
    z-index:1030;
    background:color-mix(in srgb, var(--app-bg) 92%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:1px solid var(--border-soft) !important;
    box-shadow:none;
}

.navbar-brand{
    font-size:1.5rem !important;
    letter-spacing:-0.03em;
}

.nav-title,
.nav-title *{ user-select:none; }
.nav-title{ color:var(--text-1); font-weight:800; }
#navActionsGroup{ gap:8px !important; }

#authBadge{
    padding:7px 11px;
    border-radius:999px;
    background:var(--chip-bg);
    border:1px solid var(--chip-border);
    color:var(--text-2) !important;
}

/* =========================
   BUTTONS
   ========================= */
.btn{
    --bs-btn-border-radius: 10px;
    font-weight:600;
    letter-spacing:-0.01em;
    padding:.48rem .95rem;
    border-width:1px;
    box-shadow:none !important;
    transition:
        transform var(--ease-fast),
        background-color var(--ease-fast),
        border-color var(--ease-fast),
        color var(--ease-fast),
        opacity var(--ease-fast);
}

.btn-close { filter: var(--close-btn-color)!important; }

.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn-soft{
    background:var(--surface-0);
    color:var(--text-1);
    border:1px solid var(--border-soft);
}

.btn-soft:hover,
.btn-soft:focus-visible{
    background:var(--surface-1);
    border-color:var(--border-strong);
    color:var(--text-1);
}

.btn-primary{
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--primary-2);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--primary-2);
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: #fff;
}

.btn-success{
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: color-mix(in srgb, var(--success) 90%, white);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: color-mix(in srgb, var(--success) 88%, black);
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: #fff;
}

.btn-danger{
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 90%, white);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: color-mix(in srgb, var(--danger) 88%, black);
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: #fff;
}

.btn-close{ filter:none; opacity:.82; }
html[data-bs-theme="dark"] .btn-close{ filter:invert(1) grayscale(1); }

/* =========================
   CARDS / POSTS
   ========================= */
.card{
    position:relative;
    overflow:hidden;
    background:var(--surface-0);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-1);
}

.card.compact{
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-2);
}

#posts.row{
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

.post-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-lg);
    background:var(--surface-0);
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-1);
    transition:
        transform var(--ease-smooth),
        box-shadow var(--ease-smooth),
        border-color var(--ease-fast),
        background-color var(--ease-fast);
}

.post-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-2);
    border-color:var(--border-strong);
}

.post-card:active{ transform:translateY(0) scale(.992); }
.post-card .card-body{ padding:14px 14px 16px; }

.post-cover{
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
    border-radius:0;
    background:linear-gradient(135deg, var(--surface-3), var(--surface-2));
}

.post-card .meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.post-head{ position:relative; padding-right:46px; }

.post-title,
.post-card .title{
    margin:0;
    color:var(--text-1);
    font-size:clamp(1rem, .9vw + .76rem, 1.1rem);
    font-weight:600;
    line-height:1.28;
    letter-spacing:-0.03em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
}

.post-card .excerpt{
    margin:10px 0 14px;
    color:var(--text-2);
    font-size:.98rem;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.post-card .small,
.post-card small{ color:var(--text-3) !important; }

.post-actions{
    position:absolute;
    top:10px;
    right:10px;
    z-index:5;
}

.post-actions .btn,
.post-actions .dropdown-toggle{
    width:36px;
    height:36px;
    padding:0;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:color-mix(in srgb, var(--surface-0) 94%, transparent);
    border:1px solid var(--border-soft);
}

.post-actions .dropdown-toggle::after{ display:none; }

.badge-soft,
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:500;
    letter-spacing:-0.01em;
    border:1px solid transparent;
}

.badge-soft{
    color:var(--primary);
    background:var(--primary-soft);
    border-color:color-mix(in srgb, var(--primary) 18%, transparent);
}

.badge-soft.success,
.tag-finance{
    color:var(--success);
    background:var(--success-soft);
    border-color:color-mix(in srgb, var(--success) 18%, transparent);
}

.badge-soft.marketing,
.tag-marketing{
    color:#cf5d9b;
    background:rgba(207, 93, 155, .13);
    border-color:rgba(207, 93, 155, .16);
}

.badge-soft.career,
.tag-career{
    color:#7b63f1;
    background:rgba(123, 99, 241, .13);
    border-color:rgba(123, 99, 241, .16);
}

/* =========================
   TYPOGRAPHY
   ========================= */
.h5,h5{
    color:var(--text-1);
    font-weight:700;
    letter-spacing:-0.03em;
}

.form-label{
    color:var(--text-2);
    font-size:.94rem;
    font-weight:600;
    margin-bottom:.45rem;
}

.form-text{ color:var(--text-3); }

/* =========================
   INPUTS / TEXTAREA / FILE
   ========================= */
.form-control,
.form-select{
    min-height:52px;
    border-radius:10px;
    background:var(--input-bg);
    border:1px solid var(--border-soft);
    color:var(--text-1);
    padding:.82rem .95rem;
    box-shadow:none;
    transition:
        border-color var(--ease-fast),
        box-shadow var(--ease-fast),
        background-color var(--ease-fast),
        color var(--ease-fast);
}

textarea.form-control{
    min-height:150px;
    resize:vertical;
    line-height:1.6;
}

.form-control::placeholder,
.form-select::placeholder{
    color:var(--text-3);
    opacity:1;
}

.form-control:focus,
.form-select:focus{
    color:var(--text-1);
    background:var(--input-bg);
    border-color:color-mix(in srgb, var(--primary) 30%, var(--border-soft));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

input[type="file"].form-control{ padding:.7rem .85rem; }
input[type="file"]::file-selector-button{
    border:0;
    margin-right:12px;
    padding:.62rem .9rem;
    border-radius:8px;
    background:var(--surface-2);
    color:var(--text-1);
    font-weight:600;
}

/* =========================
   DROPDOWN / LIST GROUP
   ========================= */
.dropdown-menu{
    min-width:220px;
    padding:8px;
    border-radius:12px;
    border:1px solid var(--border-soft);
    background:var(--surface-0);
    box-shadow:var(--shadow-2);
}

.dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    border-radius:8px;
    color:var(--text-2);
    font-weight:500;
    transition:background-color var(--ease-fast), color var(--ease-fast);
}

.dropdown-item i{ font-size:1rem; color:var(--text-3); }

.dropdown-item:hover,
.dropdown-item:focus{
    background:var(--surface-2);
    color:var(--text-1);
}

.dropdown-divider{ border-top-color:var(--border-soft); }
.list-group{ gap:10px; }

.list-group-item{
    border:1px solid var(--border-soft) !important;
    border-radius:10px !important;
    background:var(--surface-0);
    color:var(--text-1);
    padding:13px 14px;
    box-shadow:var(--shadow-1);
}

.upload-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.upload-pill .name{
    color:var(--text-1);
    font-weight:600;
    line-height:1.25;
}

.upload-pill .sub{
    color:var(--text-3);
    font-size:.88rem;
}

/* =========================
   FLOATING ACTION BUTTON
   ========================= */
.fab{
    width:54px;
    height:54px;
    border-radius:999px;
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:1040;
    padding:0;
    font-size:1.9rem;
    display:grid;
    place-items:center;
}

/* =========================
   OFFCANVAS
   ========================= */
.offcanvas{
    background:var(--surface-0);
    color:var(--text-1);
    border-left:1px solid var(--border-soft);
}

.offcanvas-header,
.offcanvas-body{ padding:20px; }
.offcanvas-title{
    font-weight:700;
    letter-spacing:-0.03em;
}

/* =========================
   MODALS
   ========================= */
.modal{
    --bs-modal-bg: var(--surface-0);
    --bs-modal-border-color: var(--border-soft);
    --bs-modal-header-border-color: var(--border-soft);
    --bs-modal-footer-border-color: var(--border-soft);
    --bs-modal-border-radius: 14px;
    --bs-modal-color: var(--text-1);
    --bs-backdrop-bg: rgba(9, 12, 20, .58);
    --bs-backdrop-opacity: 1;
}

.modal-content{
    background:var(--surface-0);
    color:var(--text-1);
    border:1px solid var(--border-soft);
    border-radius:14px !important;
    box-shadow:var(--shadow-3);
    overflow:hidden;
}

.modal-header,
.modal-footer{
    padding:16px 18px;
    background:var(--surface-0);
}

.modal-body{ padding:18px; }
.modal-title{
    font-weight:700;
    letter-spacing:-0.03em;
}

.alert{
    border-radius:10px;
    border-width:1px;
}

.alert-danger{
    background:var(--danger-soft);
    color:var(--danger);
    border-color:color-mix(in srgb, var(--danger) 24%, transparent);
}

/* =========================
   POST SINGLE VIEW
   ========================= */
#postBox{ border-radius:14px; }
#postBox > .card-body{ padding:18px; }

.post-title,
.post-card .title{ font-size:1.0rem; font-weight: bolder; }
.post-title { font-size:1.2rem; font-weight: bolder; padding-bottom: 10px }

.post-body{
    white-space:pre-wrap;
    background:var(--surface-1);
    border: none;
    border-radius: 0;
    color:var(--text-1);
    padding: 0 0;
    line-height:1.7;
}

.thumb-grid{
    --bs-gutter-x: .9rem;
    --bs-gutter-y: .9rem;
}

.thumb-grid img{
    width:100%;
    height:auto;
    aspect-ratio: 4 / 3;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--border-soft);
    background:var(--surface-1);
    box-shadow:var(--shadow-1);
    transition:transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast);
    cursor:zoom-in;
}

.thumb-grid img:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-2);
    border-color:var(--border-strong);
}

/* =========================
   PLACEHOLDERS / SKELETONS
   ========================= */
.placeholder,
.placeholder-glow .placeholder{ border-radius:8px; }
.placeholder{ background-color:color-mix(in srgb, var(--text-3) 20%, transparent); }

/* =========================
   IMAGE VIEWER MODAL TWEAKS
   ========================= */
#imgModal .modal-content{
    background:rgba(5, 8, 16, .96) !important;
    border:0;
    border-radius:0 !important;
    box-shadow:none;
}

#imgModal .btn-soft{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.10);
    color:#fff;
    box-shadow:none !important;
}

#imgModal .btn-soft:hover{ background:rgba(255,255,255,.13); }

#imgPrev,
#imgNext{
    border:1px solid rgba(255,255,255,.08) !important;
    background:rgba(17, 22, 34, .72) !important;
    backdrop-filter: blur(8px);
}

#imgPrev:hover,
#imgNext:hover{ background:rgba(24, 31, 48, .9) !important; }

/* =========================
   BOOTSTRAP OVERRIDES
   ========================= */
.container-fluid{ --bs-gutter-x: 1.5rem; }

.border,
.border-top,
.border-bottom,
.border-start,
.border-end{ border-color:var(--border-soft) !important; }

.text-white-50{ color:rgba(255,255,255,.72) !important; }
.bg-body,
.bg-body-tertiary{ background-color:var(--surface-0) !important; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 991.98px){
    .app-shell{ padding-inline:18px; }

    .card.compact,
    .post-card,
    #postBox,
    .modal-content{ border-radius:12px !important; }
    #postBox .card-body {padding: 12px !important;}
}

@media (max-width: 767.98px){
    .container-fluid.app-shell.py-3{ padding-top:1rem !important; }
    .post-card .card-body{ padding:13px 13px 15px; }
    .post-card .excerpt{ font-size:.95rem; }
    .fab{
        right:16px;
        bottom:16px;
        width:50px;
        height:50px;
        font-size:1.7rem;
    }

    .modal-body,
    .modal-header,
    .modal-footer,
    .offcanvas-header,
    .offcanvas-body{ padding:15px; }

    .form-control,
    .form-select{
        min-height:50px;
        border-radius:10px;
    }
}

@media (max-width: 575.98px){
    .app-shell{ padding-inline:12px; }


    .post-title,
    .post-card .title{ font-size:1.0rem; font-weight: bolder; }
    .post-title { font-size:1.2rem; font-weight: bolder; }

    .badge-soft,
    .badge{
        min-height:27px;
        padding:5px 9px;
        font-size:.79rem;
    }
}


/* Video thumb legyen ugyanakkora, mint a kép thumb */
.video-thumb-card{
    width:100%;
    aspect-ratio: 4 / 3;
    background: var(--surface-1);
    border-radius:10px;
    border:1px solid var(--border-soft) !important;
    box-shadow:var(--shadow-1);
    overflow:hidden;
    transition:transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast);
    cursor:zoom-in;
}

.video-thumb-card:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-2);
    border-color:var(--border-strong) !important;
}

.video-thumb-card > img,
.video-thumb-card > .w-100.h-100{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.video-thumb-card .fa-film{
    opacity:.92;
}



/* =========================
   POLISH
   ========================= */
.edit-media-section{ border-top:1px solid var(--border-soft); padding-top:18px; margin-top:8px; }
.edit-media-details > summary{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 12px; cursor:pointer; list-style:none; font-weight:600; }
.edit-media-details > summary::-webkit-details-marker{ display:none; }
.edit-media-details > summary > .small{ grid-column:1; grid-row:2; font-weight:400; }
.edit-media-chevron{ grid-column:2; grid-row:1/3; transition:transform var(--ease-fast); }
.edit-media-details[open] .edit-media-chevron{ transform:rotate(180deg); }
.edit-media-details-body{ padding-top:14px; }
.edit-image-dialog{ width:min(640px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--border-strong); border-radius:16px; background:var(--surface-0); color:var(--text-1); box-shadow:var(--shadow-3); }
.edit-image-dialog::backdrop{ background:rgba(0,0,0,.65); }
.edit-image-dialog-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--border-soft); }
.edit-image-dialog-header > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.edit-image-dialog-header > button{ flex-shrink:0; }
.edit-image-dialog-body{ padding:12px; text-align:center; }
.edit-image-dialog-body img{ width:100%; max-height:calc(100dvh - 140px); object-fit:contain; }
.edit-media-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.edit-media-card{ min-width:0; overflow:hidden; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface-1); }
.edit-media-preview{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; padding:0; border:0; color:inherit; aspect-ratio:4/3; background:var(--surface-3); overflow:hidden; }
.edit-media-preview img{ width:100%; height:100%; object-fit:cover; }
.edit-media-preview > .fa-solid{ font-size:2rem; color:var(--text-3); }
.edit-media-preview .edit-media-badge{ position:absolute; bottom:8px; left:8px; font-size:.72rem; }
.edit-media-card-body{ padding:10px; }
.edit-media-name{ font-size:.8rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edit-media-card .edit-media-remove{ width:100%; margin-top:8px; font-size:.78rem; }
.edit-media-card.is-removed{ border-color:var(--bs-danger); }
.edit-media-card.is-removed .edit-media-preview img{ opacity:.4; }
.edit-media-empty{ grid-column:1/-1; border:1px dashed var(--border-soft); border-radius:10px; padding:18px; text-align:center; color:var(--text-3); font-size:.85rem; }

:focus-visible{ outline:none; }
::selection{
    background:color-mix(in srgb, var(--primary) 28%, transparent);
    color:#fff;
}

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--text-3) 34%, transparent);
    border-radius:999px;
    border:3px solid transparent;
    background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
    background:color-mix(in srgb, var(--text-3) 48%, transparent);
    border:3px solid transparent;
    background-clip:padding-box;
}