/* ============================================================
PREMIUM WEB
MEMBER PROFILE / COMMUNITY DASHBOARD
============================================================ */


/* ============================================================
1. DESIGN SYSTEM
============================================================ */

:root {

/* BRAND */

--pw-black: #090909;
--pw-black-soft: #111111;
--pw-dark: #181818;

--pw-white: #ffffff;

--pw-gold: #d4af37;
--pw-gold-light: #f1d875;
--pw-gold-dark: #9a7416;

--pw-gold-soft:
rgba(212, 175, 55, 0.10);

--pw-gold-border:
rgba(212, 175, 55, 0.22);


/* BACKGROUND */

--pw-page: #f5f5f5;
--pw-card: #ffffff;

--pw-soft-bg: #fafafa;


/* TEXT */

--pw-text: #171717;
--pw-text-soft: #4f4f4f;
--pw-muted: #777777;
--pw-light-muted: #a3a3a3;


/* STATUS */

--pw-green: #198754;
--pw-red: #c93d3d;
--pw-orange: #cc8317;
--pw-blue: #2563eb;


/* BORDER */

--pw-border:
rgba(15, 15, 15, 0.08);

--pw-border-strong:
rgba(15, 15, 15, 0.14);


/* SHADOW */

--pw-shadow-xs:
0 4px 14px rgba(0, 0, 0, 0.035);

--pw-shadow-sm:
0 8px 28px rgba(0, 0, 0, 0.055);

--pw-shadow-md:
0 18px 50px rgba(0, 0, 0, 0.09);

--pw-shadow-lg:
0 32px 90px rgba(0, 0, 0, 0.16);


/* RADII */

--pw-radius-xs: 9px;
--pw-radius-sm: 12px;
--pw-radius-md: 18px;
--pw-radius-lg: 26px;
--pw-radius-xl: 32px;


/* LAYOUT */

--pw-sidebar-width: 272px;


/* MOTION */

--pw-transition:
0.25s ease;


/*
Compatibility variables.

Some JavaScript later uses:
var(--gold)
*/

--gold: var(--pw-gold);
--gold-light: var(--pw-gold-light);
--gold-soft: var(--pw-gold-soft);

--black: var(--pw-black);
--white: var(--pw-white);

--bg: var(--pw-page);

--gray-1: var(--pw-text-soft);
--gray-2: var(--pw-muted);
--gray-3: var(--pw-light-muted);

--border: var(--pw-border);

--shadow-sm: var(--pw-shadow-sm);
--shadow-md: var(--pw-shadow-md);
--shadow-lg: var(--pw-shadow-lg);

--sidebar-width: var(--pw-sidebar-width);

--radius-sm: var(--pw-radius-sm);
--radius-md: var(--pw-radius-md);
--radius-lg: var(--pw-radius-lg);

--transition: var(--pw-transition);
}


/* ============================================================
2. RESET
============================================================ */

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html {
width: 100%;

scroll-behavior: smooth;
}


body {
width: 100%;
min-height: 100vh;

background: var(--pw-page);
color: var(--pw-text);

font-family:
"Poppins",
sans-serif;

overflow-x: hidden;

-webkit-font-smoothing:
antialiased;

text-rendering:
optimizeLegibility;
}


body.modal-open {
overflow: hidden;
}


a {
color: inherit;
text-decoration: none;
}


button,
input,
textarea,
select {
font: inherit;
}


button {
border: 0;

cursor: pointer;
}


button:disabled {
cursor: not-allowed;

opacity: 0.62;
}


input,
textarea,
select {
outline: none;
}


img {
display: block;

max-width: 100%;
}


ul,
ol {
padding-left: 20px;
}


/* ============================================================
3. GLOBAL TRANSITIONS
============================================================ */

button,
a,
input,
textarea,
select {
transition:
background var(--pw-transition),
color var(--pw-transition),
border-color var(--pw-transition),
box-shadow var(--pw-transition),
transform var(--pw-transition),
opacity var(--pw-transition);
}


/* ============================================================
4. SIDEBAR
============================================================ */

.profile-sidebar {
position: fixed;

top: 0;
left: 0;

width:
var(--pw-sidebar-width);

height: 100vh;

padding:
27px
17px
20px;

display: flex;
flex-direction: column;

background:
radial-gradient(
circle at 0% 0%,
rgba(212, 175, 55, 0.08),
transparent 28%
),
linear-gradient(
180deg,
#080808 0%,
#111111 100%
);

border-right:
1px solid rgba(255, 255, 255, 0.055);

box-shadow:
12px 0 35px rgba(0, 0, 0, 0.035);

z-index: 5000;

overflow-y: auto;
overflow-x: hidden;
}


/* ============================================================
5. SIDEBAR BRAND
============================================================ */

.sidebar-brand {
padding:
0 9px 25px;
}


.sidebar-logo {
position: relative;

display: inline-flex;
align-items: center;

color: #ffffff;

font-family:
"Cinzel",
serif;

font-size: 18px;
font-weight: 800;

letter-spacing: 2px;

text-transform: uppercase;
}


.sidebar-logo span {
margin-right: 4px;

color: var(--pw-gold);
}


.sidebar-logo::after {
content: "";

position: absolute;

left: 0;
bottom: -7px;

width: 34px;
height: 2px;

border-radius: 999px;

background:
linear-gradient(
90deg,
var(--pw-gold),
var(--pw-gold-light)
);

transition:
width var(--pw-transition);
}


.sidebar-logo:hover::after {
width: 100%;
}


/* ============================================================
6. SIDEBAR MEMBER
============================================================ */

.sidebar-user {
margin-bottom: 23px;

padding: 13px;

display: flex;
align-items: center;

gap: 11px;

background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.055),
rgba(255, 255, 255, 0.025)
);

border:
1px solid rgba(255, 255, 255, 0.065);

border-radius: 16px;
}


.sidebar-avatar-wrapper {
position: relative;

flex-shrink: 0;
}


.sidebar-avatar {
width: 43px;
height: 43px;

object-fit: cover;

border-radius: 50%;

border:
2px solid
rgba(212, 175, 55, 0.64);

background: #191919;
}


.online-indicator {
position: absolute;

right: 0;
bottom: 0;

width: 10px;
height: 10px;

border-radius: 50%;

background: #29c56e;

border:
2px solid #111111;
}


.sidebar-user-info {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.sidebar-user-info strong {
width: 100%;

overflow: hidden;

color: #ffffff;

font-size: 11px;
font-weight: 600;

white-space: nowrap;
text-overflow: ellipsis;
}


.sidebar-user-info span {
color:
rgba(255, 255, 255, 0.44);

font-size: 8px;
}


/* ============================================================
7. SIDEBAR NAVIGATION
============================================================ */

.profile-navigation {
display: flex;
flex-direction: column;

gap: 4px;
}


.profile-nav-item {
position: relative;

width: 100%;
min-height: 43px;

padding:
0 12px;

display: flex;
align-items: center;

gap: 10px;

border:
1px solid transparent;

border-radius: 11px;

background: transparent;

color:
rgba(255, 255, 255, 0.60);

text-align: left;

font-size: 10px;
font-weight: 500;
}


.profile-nav-item > i {
width: 18px;

flex-shrink: 0;

text-align: center;

color:
rgba(255, 255, 255, 0.43);

font-size: 11px;
}


.profile-nav-item > span:nth-child(2) {
min-width: 0;

flex: 1;
}


.profile-nav-item:hover {
transform:
translateX(2px);

background:
rgba(255, 255, 255, 0.045);

color: #ffffff;
}


.profile-nav-item:hover > i {
color: var(--pw-gold);
}


.profile-nav-item.active {
color: #ffffff;

background:
linear-gradient(
90deg,
rgba(212, 175, 55, 0.15),
rgba(212, 175, 55, 0.04)
);

border-color:
rgba(212, 175, 55, 0.14);
}


.profile-nav-item.active > i {
color: var(--pw-gold);
}


/* ============================================================
8. SIDEBAR COUNTERS
============================================================ */

.nav-count {
min-width: 20px;
height: 20px;

padding: 0 5px;

display: inline-flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 999px;

background:
var(--pw-gold);

color: #111111;

font-size: 7.5px;
font-weight: 800;
}


.nav-count-hidden {
display: none;
}


/* ============================================================
9. SIDEBAR BOTTOM
============================================================ */

.sidebar-bottom {
margin-top: auto;

padding-top: 22px;

display: flex;
flex-direction: column;

gap: 5px;
}


.sidebar-secondary-link,
.logout-btn {
width: 100%;
min-height: 42px;

padding:
0 12px;

display: flex;
align-items: center;

gap: 10px;

border-radius: 11px;

background: transparent;

color:
rgba(255, 255, 255, 0.53);

font-size: 9.5px;
}


.sidebar-secondary-link i,
.logout-btn i {
width: 17px;

color:
rgba(255, 255, 255, 0.40);

font-size: 10px;
}


.sidebar-secondary-link:hover {
background:
rgba(255, 255, 255, 0.045);

color: #ffffff;
}


.sidebar-secondary-link:hover i {
color: var(--pw-gold);
}


.logout-btn:hover {
background:
rgba(201, 61, 61, 0.10);

color: #ff9494;
}


.logout-btn:hover i {
color: #ff9494;
}


/* ============================================================
10. SIDEBAR SCROLLBAR
============================================================ */

.profile-sidebar::-webkit-scrollbar {
width: 5px;
}


.profile-sidebar::-webkit-scrollbar-track {
background: transparent;
}


.profile-sidebar::-webkit-scrollbar-thumb {
border-radius: 999px;

background:
rgba(255, 255, 255, 0.11);
}


/* ============================================================
11. SIDEBAR OVERLAY
============================================================ */

.sidebar-overlay {
position: fixed;

inset: 0;

display: none;

background:
rgba(0, 0, 0, 0.58);

backdrop-filter:
blur(3px);

z-index: 4500;
}


.sidebar-overlay.active {
display: block;
}


/* ============================================================
12. MAIN LAYOUT
============================================================ */

.profile-layout {
width:
calc(
100% -
var(--pw-sidebar-width)
);

min-height: 100vh;

margin-left:
var(--pw-sidebar-width);
}


/* ============================================================
13. TOPBAR
============================================================ */

.profile-topbar {
position: sticky;

top: 0;

width: 100%;
min-height: 72px;

padding:
11px 30px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 20px;

background:
rgba(245, 245, 245, 0.90);

border-bottom:
1px solid var(--pw-border);

backdrop-filter:
blur(17px);

-webkit-backdrop-filter:
blur(17px);

z-index: 1500;
}


.topbar-left,
.topbar-actions {
display: flex;
align-items: center;
}


.topbar-left {
min-width: 0;

gap: 12px;
}


.topbar-title {
min-width: 0;
}


.topbar-title > span {
display: block;

margin-bottom: 1px;

color:
var(--pw-light-muted);

font-size: 7.5px;
font-weight: 600;

letter-spacing: 1.1px;

text-transform: uppercase;
}


.topbar-title h1 {
overflow: hidden;

color: var(--pw-text);

font-size: 17px;
font-weight: 650;

white-space: nowrap;
text-overflow: ellipsis;
}


.topbar-actions {
flex-shrink: 0;

gap: 7px;
}


/* ============================================================
14. TOPBAR ICONS
============================================================ */

.topbar-icon-btn {
position: relative;

width: 39px;
height: 39px;

display: inline-flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border:
1px solid var(--pw-border);

border-radius: 50%;

background: #ffffff;

color: #555555;

box-shadow:
var(--pw-shadow-xs);

font-size: 10.5px;
}


.topbar-icon-btn:hover {
transform:
translateY(-2px);

border-color:
rgba(212, 175, 55, 0.30);

color: #111111;

box-shadow:
var(--pw-shadow-sm);
}


.notification-dot {
position: absolute;

top: 7px;
right: 7px;

width: 7px;
height: 7px;

border-radius: 50%;

background:
#dc4141;

border:
2px solid #ffffff;
}


/* ============================================================
15. TOPBAR USER
============================================================ */

.topbar-user-button {
min-height: 41px;

padding:
5px 10px 5px 5px;

display: flex;
align-items: center;

gap: 8px;

border:
1px solid var(--pw-border);

border-radius: 999px;

background: #ffffff;

color: #333333;

box-shadow:
var(--pw-shadow-xs);
}


.topbar-user-button:hover {
border-color:
rgba(212, 175, 55, 0.30);

box-shadow:
var(--pw-shadow-sm);
}


.topbar-user-button img {
width: 31px;
height: 31px;

object-fit: cover;

border-radius: 50%;
}


.topbar-user-button span {
max-width: 100px;

overflow: hidden;

font-size: 9px;
font-weight: 600;

white-space: nowrap;
text-overflow: ellipsis;
}


.topbar-user-button > i {
color: #999999;

font-size: 7px;
}


/* ============================================================
16. MOBILE MENU BUTTON
============================================================ */

.mobile-sidebar-toggle {
display: none;

width: 39px;
height: 39px;

flex-shrink: 0;

align-items: center;
justify-content: center;

border:
1px solid var(--pw-border);

border-radius: 50%;

background: #ffffff;

color: #222222;

box-shadow:
var(--pw-shadow-xs);

font-size: 11px;
}


/* ============================================================
17. MAIN CONTENT
============================================================ */

.profile-main {
width: 100%;
max-width: 1580px;

margin:
0 auto;

padding:
29px 30px 60px;
}


.profile-section {
display: none;

animation:
pwSectionEntrance
0.28s ease;
}


.profile-section.active {
display: block;
}


@keyframes pwSectionEntrance {

from {
opacity: 0;

transform:
translateY(7px);
}

to {
opacity: 1;

transform:
translateY(0);
}

}


/* ============================================================
18. PROFILE HERO
============================================================ */

.profile-hero-card {
position: relative;

width: 100%;

margin-bottom: 20px;

overflow: hidden;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
var(--pw-radius-lg);

box-shadow:
var(--pw-shadow-sm);
}


/* ============================================================
19. COVER
============================================================ */

.profile-cover {
position: relative;

height: 205px;

overflow: hidden;

background:
radial-gradient(
circle at 85% 0%,
rgba(212, 175, 55, 0.22),
transparent 31%
),
radial-gradient(
circle at 12% 100%,
rgba(212, 175, 55, 0.06),
transparent 34%
),
linear-gradient(
135deg,
#070707,
#1b1b1b
);

background-position:
center;

background-size:
cover;
}


.profile-cover::after {
content: "";

position: absolute;

inset: 0;

pointer-events: none;

background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.03),
rgba(0, 0, 0, 0.18)
);
}


.profile-cover.has-image::after {
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.08),
rgba(0, 0, 0, 0.30)
);
}


.cover-decoration {
position: absolute;

border-radius: 50%;

pointer-events: none;

z-index: 1;
}


.cover-decoration-one {
width: 320px;
height: 320px;

right: -110px;
top: -170px;

background:
rgba(212, 175, 55, 0.07);
}


.cover-decoration-two {
width: 210px;
height: 210px;

left: 20%;
bottom: -145px;

background:
rgba(255, 255, 255, 0.025);
}


.edit-cover-btn {
position: absolute;

right: 17px;
bottom: 15px;

min-height: 35px;

padding:
0 13px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

border:
1px solid rgba(255, 255, 255, 0.14);

border-radius: 999px;

background:
rgba(0, 0, 0, 0.55);

color:
rgba(255, 255, 255, 0.91);

backdrop-filter:
blur(10px);

font-size: 8.5px;
font-weight: 500;

z-index: 5;
}


.edit-cover-btn:hover {
background:
rgba(0, 0, 0, 0.78);
}


/* ============================================================
20. PROFILE IDENTITY AREA
============================================================ */

.profile-identity-area {
position: relative;

min-height: 151px;

padding:
24px
27px
25px
174px;

display: grid;

grid-template-columns:
minmax(0, 1fr)
auto;

align-items: center;

gap: 28px;
}


/* ============================================================
21. PROFILE AVATAR
============================================================ */

.profile-main-avatar-wrapper {
position: absolute;

left: 27px;
top: -58px;

width: 121px;
height: 121px;

z-index: 10;
}


.profile-main-avatar {
width: 121px;
height: 121px;

object-fit: cover;

border:
5px solid #ffffff;

border-radius: 50%;

background: #111111;

box-shadow:
0 11px 32px
rgba(0, 0, 0, 0.18);
}


.avatar-edit-btn {
position: absolute;

right: 1px;
bottom: 6px;

width: 33px;
height: 33px;

display: flex;
align-items: center;
justify-content: center;

border:
3px solid #ffffff;

border-radius: 50%;

background:
var(--pw-black-soft);

color: #ffffff;

box-shadow:
0 5px 15px
rgba(0, 0, 0, 0.16);

font-size: 9px;
}


.avatar-edit-btn:hover {
background:
var(--pw-gold);

color: #111111;
}


/* ============================================================
22. PROFILE INFORMATION
============================================================ */

.profile-main-info {
min-width: 0;
}


.profile-name-row {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 14px;
}


.profile-main-info h2 {
color:
var(--pw-text);

font-size: 23px;
font-weight: 700;

line-height: 1.26;
}


.profile-username {
margin-top: 2px;

color:
var(--pw-light-muted);

font-size: 9px;
}


.profile-status-badge {
flex-shrink: 0;

padding:
6px 9px;

display: inline-flex;
align-items: center;

gap: 5px;

border:
1px solid rgba(25, 135, 84, 0.11);

border-radius: 999px;

background:
rgba(25, 135, 84, 0.07);

color:
#167044;

font-size: 8px;
font-weight: 600;
}


.profile-bio {
max-width: 740px;

margin-top: 12px;

color:
var(--pw-text-soft);

font-size: 10px;

line-height: 1.75;
}


.profile-meta {
margin-top: 13px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap:
9px 18px;
}


.profile-meta > span {
display: inline-flex;
align-items: center;

gap: 6px;

color:
var(--pw-muted);

font-size: 8.5px;
}


.profile-meta i {
color:
var(--pw-gold);

font-size: 8.5px;
}


.profile-main-actions {
align-self: start;
}


/* ============================================================
23. PROFILE EDIT BUTTON
============================================================ */

.profile-edit-btn {
min-height: 40px;

padding:
0 15px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

border-radius:
999px;

background:
var(--pw-black-soft);

color:
#ffffff;

box-shadow:
0 8px 20px
rgba(0, 0, 0, 0.08);

font-size: 9px;
font-weight: 600;
}


.profile-edit-btn:hover {
transform:
translateY(-2px);

background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
24. PROFILE STATS
============================================================ */

.profile-stats-grid {
width: 100%;

margin-bottom: 20px;

display: grid;

grid-template-columns:
repeat(
6,
minmax(0, 1fr)
);

gap: 12px;
}


.profile-stat-card {
min-height: 88px;

padding: 15px;

display: flex;
align-items: center;

gap: 11px;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius: 16px;

box-shadow:
var(--pw-shadow-xs);
}


.profile-stat-card:hover {
transform:
translateY(-3px);

border-color:
rgba(212, 175, 55, 0.20);

box-shadow:
var(--pw-shadow-sm);
}


.stat-icon {
width: 39px;
height: 39px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 12px;

background:
linear-gradient(
145deg,
#0b0b0b,
#1c1c1c
);

color:
var(--pw-gold);

font-size: 11px;
}


.profile-stat-card > div:last-child {
min-width: 0;
}


.profile-stat-card span {
display: block;

color:
var(--pw-text);

font-size: 17px;
font-weight: 700;

line-height: 1.2;
}


.profile-stat-card small {
display: block;

margin-top: 3px;

color:
var(--pw-muted);

font-size: 7.5px;

line-height: 1.35;
}


/* ============================================================
25. SHARED DASHBOARD CARD
============================================================ */

.dashboard-card {
position: relative;

min-width: 0;

padding: 21px;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
var(--pw-radius-md);

box-shadow:
var(--pw-shadow-xs);
}


.dashboard-card:hover {
border-color:
rgba(15, 15, 15, 0.105);
}


.card-heading-row {
margin-bottom: 16px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 17px;
}


.card-heading-row > div {
min-width: 0;
}


.card-eyebrow {
display: block;

margin-bottom: 4px;

color:
var(--pw-gold-dark);

font-size: 7.5px;
font-weight: 700;

letter-spacing: 1.15px;

text-transform: uppercase;
}


.dashboard-card h3 {
color:
var(--pw-text);

font-size: 14px;
font-weight: 650;

line-height: 1.4;
}


.dashboard-card > p {
color:
var(--pw-muted);

font-size: 9.5px;

line-height: 1.75;
}


/* ============================================================
26. QUICK ACTIONS
============================================================ */

.quick-actions-card {
margin-bottom: 20px;

overflow: hidden;

background:
radial-gradient(
circle at top right,
rgba(212, 175, 55, 0.09),
transparent 28%
),
#ffffff;
}


.profile-quick-actions {
display: grid;

grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);

gap: 10px;
}


.profile-quick-action {
min-width: 0;
min-height: 76px;

padding:
12px;

display: flex;
align-items: center;

gap: 10px;

border:
1px solid var(--pw-border);

border-radius:
14px;

background:
var(--pw-soft-bg);

color:
var(--pw-text);

text-align: left;
}


.profile-quick-action:hover {
transform:
translateY(-2px);

border-color:
rgba(212, 175, 55, 0.28);

background:
#ffffff;

box-shadow:
var(--pw-shadow-sm);
}


.quick-action-icon {
width: 38px;
height: 38px;

flex-shrink: 0;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 11px;
}


.quick-action-content {
min-width: 0;

flex: 1;

display: flex;
flex-direction: column;

gap: 2px;
}


.quick-action-content strong {
color:
var(--pw-text);

font-size: 9.5px;
font-weight: 650;
}


.quick-action-content small {
overflow: hidden;

color:
var(--pw-muted);

font-size: 7.5px;

line-height: 1.45;
}


.profile-quick-action > i {
flex-shrink: 0;

color:
var(--pw-light-muted);

font-size: 8px;
}


/* ============================================================
27. OVERVIEW GRID
============================================================ */

.overview-grid {
display: grid;

grid-template-columns:
minmax(0, 1.72fr)
minmax(275px, 0.78fr);

gap: 18px;
}


.overview-main-column,
.overview-side-column {
min-width: 0;

display: flex;
flex-direction: column;

gap: 18px;
}


/* ============================================================
28. WELCOME CARD
============================================================ */

.welcome-card {
overflow: hidden;

background:
radial-gradient(
circle at 90% 0%,
rgba(212, 175, 55, 0.13),
transparent 31%
),
#ffffff;
}


.welcome-icon {
flex-shrink: 0;

color:
var(--pw-gold);

font-size: 17px;
}


.welcome-actions {
margin-top: 18px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 9px;
}


/* ============================================================
29. SHARED ACTION BUTTONS
============================================================ */

.primary-card-action,
.secondary-card-action,
.section-primary-btn,
.section-secondary-btn,
.empty-action-btn,
.full-card-button {
min-height: 38px;

padding:
0 14px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

border-radius: 999px;

font-size: 8.5px;
font-weight: 600;
}


.primary-card-action,
.section-primary-btn,
.empty-action-btn,
.full-card-button {
background:
var(--pw-black-soft);

color:
#ffffff;
}


.primary-card-action:hover,
.section-primary-btn:hover,
.empty-action-btn:hover,
.full-card-button:hover {
transform:
translateY(-1px);

background:
var(--pw-gold);

color:
#111111;
}


.secondary-card-action,
.section-secondary-btn {
border:
1px solid var(--pw-border);

background:
#ffffff;

color:
#333333;
}


.secondary-card-action:hover,
.section-secondary-btn:hover {
border-color:
rgba(212, 175, 55, 0.26);

background:
var(--pw-gold-soft);

color:
#111111;
}


/* ============================================================
30. TEXT ACTION
============================================================ */

.text-action {
flex-shrink: 0;

padding: 4px 0;

display: inline-flex;
align-items: center;

gap: 6px;

background:
transparent;

color:
var(--pw-muted);

font-size: 8px;
}


.text-action:hover {
color:
var(--pw-gold-dark);
}


.icon-small-btn {
width: 30px;
height: 30px;

display: inline-flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 50%;

background:
#f4f4f4;

color:
#555555;

font-size: 9px;
}


.icon-small-btn:hover {
background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


/* ============================================================
31. EMPTY STATES
============================================================ */

.empty-state {
width: 100%;

padding: 16px;

display: flex;
align-items: center;

gap: 12px;

border:
1px dashed #dddddd;

border-radius:
13px;

background:
#fbfbfb;
}


.empty-state.compact {
min-height: 75px;
}


.empty-state-icon {
width: 37px;
height: 37px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 10px;
}


.empty-state > div:last-child {
min-width: 0;
}


.empty-state strong {
display: block;

margin-bottom: 3px;

color:
#222222;

font-size: 9.5px;
}


.empty-state p {
color:
var(--pw-muted);

font-size: 8px;

line-height: 1.55;
}


.large-empty-state {
grid-column:
1 / -1;

width: 100%;
min-height: 290px;

padding:
38px 24px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

border:
1px dashed #d7d7d7;

border-radius:
19px;

background:
#ffffff;

text-align: center;
}


.large-empty-icon {
width: 57px;
height: 57px;

margin-bottom: 15px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 17px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 19px;
}


.large-empty-state h3 {
margin-bottom: 6px;

color:
var(--pw-text);

font-size: 13px;
}


.large-empty-state p {
max-width: 450px;

color:
var(--pw-muted);

font-size: 9px;

line-height: 1.7;
}


.empty-action-btn {
margin-top: 16px;
}


/* ============================================================
32. PROFILE COMPLETION
============================================================ */

.profile-completion-card {
text-align: center;
}


.profile-completion-card h3 {
margin-bottom: 18px;
}


.completion-circle-wrapper {
margin:
8px 0 17px;

display: flex;
justify-content: center;
}


.completion-circle {
position: relative;

width: 105px;
height: 105px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
conic-gradient(
var(--pw-gold) 0 0%,
#eeeeee 0% 100%
);
}


.completion-circle::before {
content: "";

position: absolute;

inset: 9px;

border-radius: 50%;

background:
#ffffff;
}


.completion-circle span {
position: relative;

z-index: 2;

color:
var(--pw-text);

font-size: 16px;
font-weight: 700;
}


.profile-completion-card > p {
font-size: 8.5px;

line-height: 1.65;
}


.full-card-button {
width: 100%;

margin-top: 17px;
}


/* ============================================================
33. SKILLS
============================================================ */

.skills-container {
display: flex;
flex-wrap: wrap;

gap: 6px;
}


.skills-container .skill-tag {
padding:
6px 9px;

border:
1px solid
rgba(212, 175, 55, 0.12);

border-radius: 999px;

background:
var(--pw-gold-soft);

color:
#7c5f11;

font-size: 8px;
font-weight: 600;
}


.empty-inline-text {
color:
var(--pw-light-muted);

font-size: 8.5px;
}


/* ============================================================
34. PROFESSIONAL LINKS
============================================================ */

.professional-links {
margin-top: 15px;

display: flex;
flex-direction: column;

gap: 7px;
}


.professional-link {
min-height: 39px;

padding:
0 11px;

display: flex;
align-items: center;

gap: 9px;

border:
1px solid var(--pw-border);

border-radius: 11px;

background:
var(--pw-soft-bg);

color:
#333333;

font-size: 8.5px;
}


.professional-link:hover {
border-color:
rgba(212, 175, 55, 0.24);

background:
#ffffff;
}


.professional-link span {
min-width: 0;

flex: 1;
}


.professional-link > i:first-child {
color:
var(--pw-gold-dark);
}


.professional-link > i:last-child {
color:
var(--pw-light-muted);

font-size: 7px;
}


.professional-link.disabled {
opacity: 0.42;

pointer-events: none;
}


/* ============================================================
35. OVERVIEW COURSE SUMMARY
============================================================ */

.overview-course-summary {
margin-top: 3px;
}


/* ============================================================
36. WORK STATUS SUMMARY
============================================================ */

.work-status-summary {
margin-top: 4px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 8px;
}


.work-status-item {
padding: 12px;

border:
1px solid var(--pw-border);

border-radius:
12px;

background:
var(--pw-soft-bg);
}


.work-status-item span {
display: block;

margin-bottom: 4px;

color:
var(--pw-muted);

font-size: 7.5px;
}


.work-status-item strong {
color:
var(--pw-text);

font-size: 17px;
font-weight: 700;
}


.work-summary-actions {
margin-top: 10px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 7px;
}


.work-summary-actions button {
min-height: 35px;

border:
1px solid var(--pw-border);

border-radius:
999px;

background:
#ffffff;

color:
#444444;

font-size: 8px;
font-weight: 600;
}


.work-summary-actions button:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);

color:
#111111;
}


/* ============================================================
37. RECENT CONTENT LISTS
============================================================ */

.recent-posts-list,
.recent-projects-list,
.profile-interactions-list {
width: 100%;
}


.profile-list-item {
min-height: 59px;

padding:
10px 0;

display: flex;
align-items: center;

gap: 10px;

border-bottom:
1px solid var(--pw-border);
}


.profile-list-item:first-child {
padding-top: 0;
}


.profile-list-item:last-child {
padding-bottom: 0;

border-bottom: 0;
}


.profile-list-icon {
width: 37px;
height: 37px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 10px;
}


.profile-list-content {
min-width: 0;

flex: 1;
}


.profile-list-content strong {
display: block;

overflow: hidden;

color:
#222222;

font-size: 9px;
font-weight: 600;

white-space: nowrap;
text-overflow: ellipsis;
}


.profile-list-content small {
display: block;

margin-top: 3px;

color:
var(--pw-light-muted);

font-size: 7.5px;
}


.profile-list-action {
width: 29px;
height: 29px;

flex-shrink: 0;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
#f3f3f3;

color:
#555555;

font-size: 7px;
}


.profile-list-action:hover {
background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


/* ============================================================
38. SECTION PAGE HEADER
============================================================ */

.section-page-header {
margin-bottom: 22px;

display: flex;
align-items: flex-end;
justify-content: space-between;

gap: 20px;
}


.section-page-header > div {
min-width: 0;
}


.section-page-header > div > span {
display: block;

margin-bottom: 5px;

color:
var(--pw-gold-dark);

font-size: 7.5px;
font-weight: 700;

letter-spacing: 1.25px;

text-transform: uppercase;
}


.section-page-header h2 {
margin-bottom: 4px;

color:
var(--pw-text);

font-size: 23px;
font-weight: 700;

line-height: 1.3;
}


.section-page-header p {
max-width: 700px;

color:
var(--pw-muted);

font-size: 9px;

line-height: 1.65;
}


/* ============================================================
39. SHARED CONTENT GRID
============================================================ */

.content-grid,
.courses-dashboard-grid {
display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

gap: 16px;
}


/* ============================================================
PUBLICATION SUMMARY
============================================================ */

.post-summary-grid,
.project-summary-grid,
.course-summary-grid,
.job-summary-grid,
.application-summary-grid {
width: 100%;

margin-bottom: 20px;

display: grid;

grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);

gap: 12px;
}


.post-summary-card {
min-height: 86px;

padding: 14px;

display: flex;
align-items: center;

gap: 11px;

background: #ffffff;

border:
1px solid var(--pw-border);

border-radius: 15px;

box-shadow:
var(--pw-shadow-xs);
}


.post-summary-card:hover {
transform:
translateY(-2px);

border-color:
rgba(212, 175, 55, 0.20);

box-shadow:
var(--pw-shadow-sm);
}


.post-summary-icon {
width: 39px;
height: 39px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 12px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 11px;
}


.post-summary-card strong {
display: block;

color:
var(--pw-text);

font-size: 17px;
font-weight: 700;

line-height: 1.15;
}


.post-summary-card span {
display: block;

margin-top: 3px;

color:
var(--pw-muted);

font-size: 7.5px;

line-height: 1.35;
}


/* ============================================================
POST COMPOSER
============================================================ */

.post-composer-card {
display: none;

width: 100%;

margin-bottom: 20px;

overflow: hidden;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
var(--pw-radius-md);

box-shadow:
var(--pw-shadow-md);
}


.post-composer-card.active {
display: block;

animation:
pwComposerOpen
0.28s ease;
}


@keyframes pwComposerOpen {

from {
opacity: 0;

transform:
translateY(-5px);
}

to {
opacity: 1;

transform:
translateY(0);
}

}


.post-composer-header {
min-height: 77px;

padding:
15px 19px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;

border-bottom:
1px solid var(--pw-border);

background:
linear-gradient(
180deg,
#ffffff,
#fcfcfc
);
}


.post-composer-user {
min-width: 0;

display: flex;
align-items: center;

gap: 11px;
}


.post-composer-user img {
width: 43px;
height: 43px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;

border:
2px solid
rgba(212, 175, 55, 0.35);
}


.post-composer-user > div {
min-width: 0;
}


.post-composer-user strong {
display: block;

overflow: hidden;

color:
var(--pw-text);

font-size: 10px;
font-weight: 650;

white-space: nowrap;
text-overflow: ellipsis;
}


.post-composer-user span {
display: block;

margin-top: 2px;

color:
var(--pw-muted);

font-size: 8px;
}


.composer-close-btn {
width: 32px;
height: 32px;

flex-shrink: 0;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
#f3f3f3;

color:
#666666;

font-size: 10px;
}


.composer-close-btn:hover {
transform:
rotate(4deg);

background:
#ececec;

color:
#111111;
}


/* ============================================================
COMPOSER FORM
============================================================ */

#createPostForm {
padding:
20px;
}


.composer-field {
position: relative;

width: 100%;

margin-bottom: 18px;
}


.composer-field > label {
display: block;

margin-bottom: 7px;

color:
#333333;

font-size: 9px;
font-weight: 600;
}


.composer-field > label small {
margin-left: 4px;

color:
var(--pw-light-muted);

font-size: 7px;
font-weight: 500;
}


.composer-field > input,
.composer-field > textarea,
.composer-field > select {
width: 100%;

border:
1px solid #dddddd;

border-radius:
12px;

background:
#fafafa;

color:
var(--pw-text);

font-size: 9.5px;
}


.composer-field > input,
.composer-field > select {
height: 43px;

padding:
0 12px;
}


.composer-field > textarea {
min-height: 110px;

padding:
11px 12px;

resize: vertical;

line-height: 1.65;
}


.composer-field > input:focus,
.composer-field > textarea:focus,
.composer-field > select:focus {
border-color:
var(--pw-gold);

background:
#ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.08);
}


/* ============================================================
POST TYPE
============================================================ */

.post-type-selector {
display: grid;

grid-template-columns:
repeat(
5,
minmax(0, 1fr)
);

gap: 8px;
}


.post-type-option {
cursor: pointer;
}


.post-type-option input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.post-type-option span {
min-height: 45px;

padding:
0 9px;

display: flex;
align-items: center;
justify-content: center;

gap: 6px;

border:
1px solid var(--pw-border);

border-radius:
11px;

background:
var(--pw-soft-bg);

color:
#555555;

font-size: 8px;
font-weight: 600;

text-align: center;
}


.post-type-option span i {
color:
var(--pw-light-muted);

font-size: 9px;
}


.post-type-option:hover span {
border-color:
rgba(212, 175, 55, 0.25);

background:
#ffffff;
}


.post-type-option
input:checked
+
span {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);

color:
#5e480e;
}


.post-type-option
input:checked
+
span i {
color:
var(--pw-gold-dark);
}


/* ============================================================
COUNTERS
============================================================ */

.composer-counter {
margin-top: 5px;

text-align: right;

color:
var(--pw-light-muted);

font-size: 7px;
}


/* ============================================================
RICH TEXT EDITOR
============================================================ */

.rich-editor {
overflow: hidden;

border:
1px solid #dddddd;

border-radius:
14px;

background:
#ffffff;
}


.rich-editor:focus-within {
border-color:
var(--pw-gold);

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.08);
}


.rich-editor-toolbar {
min-height: 47px;

padding:
7px 8px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 4px;

border-bottom:
1px solid var(--pw-border);

background:
#fafafa;
}


.editor-tool {
width: 31px;
height: 31px;

display: inline-flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border:
1px solid transparent;

border-radius:
8px;

background:
transparent;

color:
#555555;

font-size: 9px;
}


.editor-tool:hover {
border-color:
var(--pw-border);

background:
#ffffff;

color:
var(--pw-gold-dark);
}


.editor-tool.active {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


.editor-separator {
width: 1px;
height: 21px;

margin:
0 3px;

background:
#dddddd;
}


.rich-editor-content {
width: 100%;
min-height: 165px;
max-height: 420px;

padding:
14px;

overflow-y: auto;

color:
var(--pw-text);

font-size: 9.5px;

line-height: 1.75;

outline: none;

word-break: break-word;
}


.rich-editor-content:empty::before {
content:
attr(data-placeholder);

color:
#aaaaaa;

pointer-events: none;
}


.rich-editor-content p {
margin-bottom: 8px;
}


.rich-editor-content ul,
.rich-editor-content ol {
margin:
7px 0;

padding-left:
22px;
}


.rich-editor-content blockquote {
margin:
10px 0;

padding:
10px 12px;

border-left:
3px solid
var(--pw-gold);

background:
var(--pw-gold-soft);

color:
#555555;

border-radius:
0 8px 8px 0;
}


.rich-editor-content a {
color:
#8f6a08;

text-decoration:
underline;
}


/* ============================================================
MEDIA ACTIONS
============================================================ */

.post-media-actions {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 8px;
}


.post-media-button {
min-height: 38px;

padding:
0 13px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

border:
1px solid var(--pw-border);

border-radius:
999px;

background:
#ffffff;

color:
#444444;

font-size: 8px;
font-weight: 600;
}


.post-media-button i {
color:
var(--pw-gold-dark);
}


.post-media-button:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);

color:
#111111;
}


.selected-file-name {
display: block;

margin-top: 7px;

color:
var(--pw-light-muted);

font-size: 7.5px;
}


/* ============================================================
IMAGE PREVIEW
============================================================ */

.post-image-preview {
position: relative;

display: none;

width: 100%;
max-width: 620px;

margin-top: 12px;

overflow: hidden;

border:
1px solid var(--pw-border);

border-radius:
15px;

background:
#f5f5f5;
}


.post-image-preview.active {
display: block;
}


.post-image-preview img {
width: 100%;
max-height: 360px;

object-fit: cover;
}


.post-image-preview button {
position: absolute;

top: 10px;
right: 10px;

width: 32px;
height: 32px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
rgba(0, 0, 0, 0.72);

color:
#ffffff;

font-size: 9px;
}


.post-image-preview button:hover {
background:
var(--pw-red);
}


/* ============================================================
POST CODE SECTION
============================================================ */

.post-code-section {
display: none;

width: 100%;

margin-bottom: 18px;

overflow: hidden;

border:
1px solid #242424;

border-radius:
15px;

background:
#111111;
}


.post-code-section.active {
display: block;
}


.post-code-heading {
min-height: 49px;

padding:
0 14px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 12px;

border-bottom:
1px solid rgba(255, 255, 255, 0.08);
}


.post-code-heading > div {
display: flex;
align-items: center;

gap: 8px;
}


.post-code-heading > div i {
color:
var(--pw-gold);

font-size: 10px;
}


.post-code-heading > div span {
color:
#ffffff;

font-size: 9px;
font-weight: 600;
}


.post-code-heading button {
width: 29px;
height: 29px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
rgba(255, 255, 255, 0.07);

color:
rgba(255, 255, 255, 0.65);

font-size: 8px;
}


.post-code-heading button:hover {
background:
rgba(255, 255, 255, 0.12);

color:
#ffffff;
}


.post-code-helper {
padding:
11px 14px 0;

color:
rgba(255, 255, 255, 0.46);

font-size: 7.5px;

line-height: 1.6;
}


.post-code-tabs {
padding:
11px 14px 0;

display: flex;
align-items: center;

gap: 5px;
}


.post-code-tab {
min-height: 31px;

padding:
0 10px;

border-radius:
8px 8px 0 0;

background:
rgba(255, 255, 255, 0.05);

color:
rgba(255, 255, 255, 0.55);

font-size: 7.5px;
font-weight: 600;
}


.post-code-tab.active {
background:
#1b1b1b;

color:
var(--pw-gold);
}


.post-code-editor {
display: none;

width: 100%;
min-height: 240px;

padding:
14px;

resize: vertical;

border: 0;

border-top:
1px solid rgba(255, 255, 255, 0.07);

border-radius: 0;

outline: none;

background:
#0d0d0d;

color:
#ededed;

font-family:
"Courier New",
monospace;

font-size: 9px;

line-height: 1.65;

tab-size: 4;
}


.post-code-editor.active {
display: block;
}


/* ============================================================
TAGS
============================================================ */

.tags-input-wrapper {
position: relative;

width: 100%;
}


.tags-input-wrapper > i {
position: absolute;

left: 12px;
top: 50%;

transform:
translateY(-50%);

color:
var(--pw-gold-dark);

font-size: 8px;

z-index: 2;
}


.tags-input-wrapper input {
width: 100%;
height: 43px;

padding:
0 12px 0 31px;

border:
1px solid #dddddd;

border-radius:
12px;

background:
#fafafa;

color:
var(--pw-text);

font-size: 9.5px;
}


.tags-input-wrapper input:focus {
border-color:
var(--pw-gold);

background:
#ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.08);
}


.composer-help {
display: block;

margin-top: 5px;

color:
var(--pw-light-muted);

font-size: 7px;
}


/* ============================================================
POST VISIBILITY
============================================================ */

.post-visibility-options {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 9px;
}


.post-visibility-option {
cursor: pointer;
}


.post-visibility-option input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.post-visibility-option {
min-height: 68px;

padding:
12px;

display: flex;
align-items: center;

gap: 10px;

border:
1px solid var(--pw-border);

border-radius:
13px;

background:
var(--pw-soft-bg);
}


.post-visibility-option:hover {
border-color:
rgba(212, 175, 55, 0.25);

background:
#ffffff;
}


.post-visibility-option:has(input:checked) {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);
}


.visibility-icon {
width: 36px;
height: 36px;

flex-shrink: 0;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 10px;
}


.post-visibility-option > span:last-child {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.post-visibility-option strong {
color:
var(--pw-text);

font-size: 8.5px;
}


.post-visibility-option small {
color:
var(--pw-muted);

font-size: 7px;
}


/* ============================================================
PROFILE MESSAGES
============================================================ */

.profile-message {
display: none;

margin:
9px 0;

padding:
10px 12px;

border-radius:
11px;

font-size: 8px;

line-height: 1.55;
}


.profile-message.success {
display: block;

border:
1px solid
rgba(25, 135, 84, 0.15);

background:
rgba(25, 135, 84, 0.07);

color:
#12663d;
}


.profile-message.error {
display: block;

border:
1px solid
rgba(201, 61, 61, 0.16);

background:
rgba(201, 61, 61, 0.07);

color:
#a92d2d;
}


.profile-message.info {
display: block;

border:
1px solid
rgba(37, 99, 235, 0.13);

background:
rgba(37, 99, 235, 0.06);

color:
#1d4ed8;
}


/* ============================================================
COMPOSER FOOTER
============================================================ */

.post-composer-footer {
margin-top: 20px;

padding-top: 16px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 16px;

border-top:
1px solid var(--pw-border);
}


.composer-save-info {
min-width: 0;

display: flex;
align-items: flex-start;

gap: 7px;

color:
var(--pw-muted);

font-size: 7.5px;

line-height: 1.5;
}


.composer-save-info i {
margin-top: 2px;

flex-shrink: 0;

color:
var(--pw-gold-dark);
}


.composer-actions {
flex-shrink: 0;

display: flex;
align-items: center;

gap: 7px;
}


.composer-cancel-btn,
.composer-draft-btn,
.composer-publish-btn {
min-height: 38px;

padding:
0 13px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius:
999px;

font-size: 8px;
font-weight: 600;
}


.composer-cancel-btn {
background:
transparent;

color:
var(--pw-muted);
}


.composer-cancel-btn:hover {
background:
#f3f3f3;

color:
#222222;
}


.composer-draft-btn {
border:
1px solid var(--pw-border);

background:
#ffffff;

color:
#333333;
}


.composer-draft-btn:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);
}


.composer-publish-btn {
background:
var(--pw-black-soft);

color:
#ffffff;
}


.composer-publish-btn:hover {
transform:
translateY(-1px);

background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
CONTENT TOOLBAR
============================================================ */

.profile-content-toolbar {
width: 100%;

margin-bottom: 16px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;
}


.content-filter-group {
min-width: 0;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 6px;
}


.content-filter-btn {
min-height: 33px;

padding:
0 11px;

border:
1px solid var(--pw-border);

border-radius:
999px;

background:
#ffffff;

color:
#666666;

font-size: 7.5px;
font-weight: 600;
}


.content-filter-btn:hover {
border-color:
var(--pw-gold-border);

color:
var(--pw-gold-dark);
}


.content-filter-btn.active {
border-color:
var(--pw-black-soft);

background:
var(--pw-black-soft);

color:
#ffffff;
}


.content-search-wrapper {
position: relative;

width: 100%;
max-width: 280px;

flex-shrink: 0;
}


.content-search-wrapper > i {
position: absolute;

left: 12px;
top: 50%;

transform:
translateY(-50%);

color:
#a0a0a0;

font-size: 8px;
}


.content-search-wrapper input {
width: 100%;
height: 38px;

padding:
0 12px 0 31px;

border:
1px solid var(--pw-border);

border-radius:
999px;

background:
#ffffff;

color:
var(--pw-text);

font-size: 8px;
}


.content-search-wrapper input:focus {
border-color:
var(--pw-gold);

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.07);
}


/* ============================================================
USER POSTS LIST
============================================================ */

.profile-posts-list {
width: 100%;

display: flex;
flex-direction: column;

gap: 13px;
}


/* ============================================================
DYNAMIC POST CARD
============================================================ */

.member-post-card {
width: 100%;

padding:
18px;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
17px;

box-shadow:
var(--pw-shadow-xs);
}


.member-post-card:hover {
border-color:
rgba(212, 175, 55, 0.18);

box-shadow:
var(--pw-shadow-sm);
}


.member-post-header {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 15px;
}


.member-post-author {
min-width: 0;

display: flex;
align-items: center;

gap: 10px;
}


.member-post-author img {
width: 39px;
height: 39px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.member-post-author-info {
min-width: 0;
}


.member-post-author-info strong {
display: block;

color:
var(--pw-text);

font-size: 9px;
}


.member-post-author-info span {
display: block;

margin-top: 2px;

color:
var(--pw-light-muted);

font-size: 7px;
}


.member-post-status {
min-height: 25px;

padding:
0 8px;

display: inline-flex;
align-items: center;

border-radius:
999px;

font-size: 6.8px;
font-weight: 700;

text-transform: uppercase;
}


.member-post-status.published {
background:
rgba(25, 135, 84, 0.08);

color:
#157045;
}


.member-post-status.draft {
background:
rgba(204, 131, 23, 0.10);

color:
#93600f;
}


.member-post-status.hidden {
background:
#f0f0f0;

color:
#666666;
}


.member-post-title {
margin-top: 15px;

color:
var(--pw-text);

font-size: 14px;
font-weight: 650;

line-height: 1.4;
}


.member-post-body {
margin-top: 9px;

color:
#4d4d4d;

font-size: 9px;

line-height: 1.75;

word-break: break-word;
}


.member-post-body p {
margin-bottom: 7px;
}


.member-post-body a {
color:
var(--pw-gold-dark);

text-decoration:
underline;
}


.member-post-image {
width: 100%;

margin-top: 13px;

overflow: hidden;

border-radius:
14px;

background:
#f3f3f3;
}


.member-post-image img {
width: 100%;
max-height: 480px;

object-fit: cover;
}


/* ============================================================
POST CODE PREVIEW
============================================================ */

.member-post-code {
margin-top: 13px;

overflow: hidden;

border:
1px solid #202020;

border-radius:
14px;

background:
#0d0d0d;
}


.member-post-code-tabs {
min-height: 38px;

padding:
0 9px;

display: flex;
align-items: center;

gap: 5px;

border-bottom:
1px solid rgba(255, 255, 255, 0.07);
}


.member-post-code-tab {
min-height: 26px;

padding:
0 8px;

border-radius:
7px;

background:
rgba(255, 255, 255, 0.055);

color:
rgba(255, 255, 255, 0.55);

font-size: 7px;
}


.member-post-code-tab.active {
background:
rgba(212, 175, 55, 0.12);

color:
var(--pw-gold);
}


.member-post-code pre {
margin: 0;

padding:
14px;

overflow-x: auto;

color:
#ededed;

font-family:
"Courier New",
monospace;

font-size: 8px;

line-height: 1.65;
}


/* ============================================================
TAGS ON POST
============================================================ */

.member-post-tags {
margin-top: 12px;

display: flex;
flex-wrap: wrap;

gap: 5px;
}


.member-post-tag {
padding:
5px 8px;

border-radius:
999px;

background:
var(--pw-gold-soft);

color:
#79600f;

font-size: 6.8px;
font-weight: 600;
}


/* ============================================================
POST FOOTER
============================================================ */

.member-post-footer {
margin-top: 15px;

padding-top: 13px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 12px;

border-top:
1px solid var(--pw-border);
}


.member-post-interactions {
display: flex;
align-items: center;

gap: 13px;
}


.member-post-interactions button {
display: inline-flex;
align-items: center;

gap: 5px;

background:
transparent;

color:
var(--pw-muted);

font-size: 7.5px;
}


.member-post-interactions button i {
font-size: 8px;
}


.member-post-interactions button:hover {
color:
var(--pw-gold-dark);
}


.member-post-actions {
display: flex;
align-items: center;

gap: 5px;
}


.member-post-action-btn {
min-height: 31px;

padding:
0 9px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

border-radius:
999px;

background:
#f4f4f4;

color:
#555555;

font-size: 7px;
}


.member-post-action-btn:hover {
background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


.member-post-action-btn.danger:hover {
background:
rgba(201, 61, 61, 0.08);

color:
var(--pw-red);
}


/* ============================================================
INTERACTIONS PANEL
============================================================ */

.post-interactions-panel,
.job-applicants-panel {
position: fixed;

top: 0;
right: 0;

width: min(
430px,
100%
);

height: 100vh;

display: flex;
flex-direction: column;

transform:
translateX(105%);

background:
#ffffff;

border-left:
1px solid var(--pw-border);

box-shadow:
-18px 0 50px
rgba(0, 0, 0, 0.12);

z-index: 9000;

transition:
transform 0.3s ease;
}


.post-interactions-panel.active,
.job-applicants-panel.active {
transform:
translateX(0);
}


.interactions-panel-header {
min-height: 76px;

padding:
16px 18px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;

border-bottom:
1px solid var(--pw-border);
}


.interactions-panel-header > div {
min-width: 0;
}


.interactions-panel-header span {
display: block;

margin-bottom: 2px;

color:
var(--pw-gold-dark);

font-size: 7px;
font-weight: 700;

text-transform: uppercase;

letter-spacing: 1px;
}


.interactions-panel-header h3 {
overflow: hidden;

color:
var(--pw-text);

font-size: 14px;

white-space: nowrap;
text-overflow: ellipsis;
}


.interactions-panel-header > button {
width: 31px;
height: 31px;

display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 50%;

background:
#f3f3f3;

color:
#555555;

font-size: 9px;
}


/* ============================================================
INTERACTION TABS
============================================================ */

.interactions-tabs {
padding:
10px 14px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 7px;

border-bottom:
1px solid var(--pw-border);

background:
#fafafa;
}


.interaction-tab {
min-height: 38px;

padding:
0 10px;

display: flex;
align-items: center;
justify-content: center;

gap: 6px;

border:
1px solid var(--pw-border);

border-radius:
10px;

background:
#ffffff;

color:
#666666;

font-size: 7.5px;
font-weight: 600;
}


.interaction-tab span {
min-width: 18px;
height: 18px;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 999px;

background:
#eeeeee;

color:
#555555;

font-size: 6.5px;
}


.interaction-tab.active {
border-color:
var(--pw-black-soft);

background:
var(--pw-black-soft);

color:
#ffffff;
}


.interaction-tab.active span {
background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
INTERACTION CONTENT
============================================================ */

.interaction-content {
display: none;

flex: 1;

overflow-y: auto;
}


.interaction-content.active {
display: block;
}


.interaction-comments-list,
.interaction-likes-list {
padding:
15px;
}


.interaction-empty {
min-height: 220px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 9px;

color:
var(--pw-light-muted);

text-align: center;
}


.interaction-empty i {
font-size: 21px;

color:
#d0d0d0;
}


.interaction-empty p {
max-width: 260px;

font-size: 8.5px;

line-height: 1.6;
}


/* ============================================================
COMMENT ITEM
============================================================ */

.interaction-comment-item,
.interaction-like-item {
padding:
11px 0;

display: flex;
align-items: flex-start;

gap: 10px;

border-bottom:
1px solid var(--pw-border);
}


.interaction-comment-item:last-child,
.interaction-like-item:last-child {
border-bottom: 0;
}


.interaction-comment-item img,
.interaction-like-item img {
width: 36px;
height: 36px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.interaction-comment-body,
.interaction-like-body {
min-width: 0;

flex: 1;
}


.interaction-comment-body strong,
.interaction-like-body strong {
display: block;

color:
var(--pw-text);

font-size: 8.5px;
}


.interaction-comment-body p {
margin-top: 4px;

color:
#555555;

font-size: 8px;

line-height: 1.6;
}


.interaction-comment-body small,
.interaction-like-body small {
display: block;

margin-top: 4px;

color:
var(--pw-light-muted);

font-size: 6.8px;
}


/* ============================================================
SCROLLBARS
============================================================ */

.rich-editor-content::-webkit-scrollbar,
.post-code-editor::-webkit-scrollbar,
.interaction-content::-webkit-scrollbar {
width: 5px;
}


.rich-editor-content::-webkit-scrollbar-thumb,
.post-code-editor::-webkit-scrollbar-thumb,
.interaction-content::-webkit-scrollbar-thumb {
border-radius: 999px;

background:
rgba(120, 120, 120, 0.25);
}

/* ============================================================
PROJECT CREATOR
============================================================ */

.project-creator-card {
display: none;

width: 100%;

margin-bottom: 20px;

overflow: hidden;

background: #ffffff;

border:
1px solid var(--pw-border);

border-radius:
var(--pw-radius-md);

box-shadow:
var(--pw-shadow-md);
}


.project-creator-card.active {
display: block;

animation:
pwProjectCreatorOpen
0.28s ease;
}


@keyframes pwProjectCreatorOpen {

from {
opacity: 0;

transform:
translateY(-5px);
}

to {
opacity: 1;

transform:
translateY(0);
}

}


/* ============================================================
PROJECT CREATOR HEADER
============================================================ */

.project-creator-header {
min-height: 82px;

padding:
17px 20px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 18px;

border-bottom:
1px solid var(--pw-border);

background:
linear-gradient(
180deg,
#ffffff,
#fbfbfb
);
}


.project-creator-header > div {
min-width: 0;
}


.project-creator-header h3 {
margin-bottom: 3px;

color:
var(--pw-text);

font-size: 15px;
font-weight: 650;
}


.project-creator-header p {
color:
var(--pw-muted);

font-size: 8.5px;

line-height: 1.6;
}


/* ============================================================
PROJECT FORM
============================================================ */

#projectForm {
padding:
20px;
}


/* ============================================================
PROJECT INFORMATION
============================================================ */

.project-information-grid {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap:
0 14px;
}


.project-description-field {
grid-column:
1 / -1;
}


.project-information-grid select {
appearance: none;

background-image:
linear-gradient(
45deg,
transparent 50%,
#888888 50%
),
linear-gradient(
135deg,
#888888 50%,
transparent 50%
);

background-position:
calc(100% - 17px) 18px,
calc(100% - 12px) 18px;

background-size:
5px 5px,
5px 5px;

background-repeat:
no-repeat;
}


/* ============================================================
PROJECT WORKSPACE TOOLBAR
============================================================ */

.project-workspace-toolbar {
width: 100%;

min-height: 53px;

padding:
8px 10px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 12px;

border:
1px solid #252525;

border-bottom: 0;

border-radius:
14px 14px 0 0;

background:
#111111;
}


.project-editor-tabs {
min-width: 0;

display: flex;
align-items: center;

gap: 5px;
}


.project-editor-tab {
min-height: 34px;

padding:
0 11px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius:
8px;

background:
rgba(255, 255, 255, 0.05);

color:
rgba(255, 255, 255, 0.58);

font-size: 7.5px;
font-weight: 600;
}


.project-editor-tab i {
font-size: 10px;
}


.project-editor-tab:hover {
background:
rgba(255, 255, 255, 0.09);

color:
#ffffff;
}


.project-editor-tab.active {
background:
rgba(212, 175, 55, 0.12);

color:
var(--pw-gold);

box-shadow:
inset 0 0 0 1px
rgba(212, 175, 55, 0.15);
}


.project-editor-actions {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 5px;
}


.project-tool-btn {
min-height: 33px;

padding:
0 10px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius:
8px;

background:
rgba(255, 255, 255, 0.065);

color:
rgba(255, 255, 255, 0.68);

font-size: 7px;
font-weight: 600;
}


.project-tool-btn:hover {
background:
rgba(255, 255, 255, 0.12);

color:
#ffffff;
}


#runProjectBtn {
background:
var(--pw-gold);

color:
#111111;
}


#runProjectBtn:hover {
background:
var(--pw-gold-light);
}


/* ============================================================
PROJECT WORKSPACE
============================================================ */

.project-workspace {
width: 100%;

min-height: 560px;

display: grid;

grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);

border:
1px solid #252525;

border-radius:
0 0 14px 14px;

overflow: hidden;

background:
#0d0d0d;
}


/* ============================================================
PROJECT CODE PANEL
============================================================ */

.project-code-panel {
min-width: 0;
min-height: 560px;

border-right:
1px solid #252525;

background:
#0d0d0d;
}


.project-code-pane {
display: none;

width: 100%;
height: 100%;
}


.project-code-pane.active {
display: flex;

flex-direction: column;
}


.project-code-pane-header {
min-height: 42px;

padding:
0 13px;

display: flex;
align-items: center;

border-bottom:
1px solid rgba(255, 255, 255, 0.07);

background:
#141414;
}


.project-code-pane-header span {
display: inline-flex;
align-items: center;

gap: 7px;

color:
rgba(255, 255, 255, 0.62);

font-size: 7.5px;
font-weight: 600;
}


.project-code-pane-header i {
color:
var(--pw-gold);

font-size: 9px;
}


/* ============================================================
CODE TEXTAREA
============================================================ */

.project-code-textarea {
width: 100%;
min-height: 518px;

flex: 1;

padding:
15px;

resize: none;

border: 0;

outline: none;

background:
#0c0c0c;

color:
#ececec;

caret-color:
var(--pw-gold);

font-family:
"Courier New",
Consolas,
monospace;

font-size: 9px;

line-height: 1.7;

tab-size: 4;

white-space: pre;

overflow: auto;
}


.project-code-textarea::selection {
background:
rgba(212, 175, 55, 0.26);

color:
#ffffff;
}


.project-code-textarea::placeholder {
color:
rgba(255, 255, 255, 0.24);
}


/* ============================================================
PROJECT PREVIEW
============================================================ */

.project-preview-panel {
min-width: 0;
min-height: 560px;

display: flex;
flex-direction: column;

background:
#ececec;
}


.project-preview-header {
min-height: 42px;

padding:
0 12px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

border-bottom:
1px solid #dddddd;

background:
#ffffff;
}


.project-preview-header > div:first-child {
display: flex;
align-items: center;

gap: 7px;

color:
#555555;

font-size: 7.5px;
font-weight: 600;
}


.preview-status-dot {
width: 7px;
height: 7px;

flex-shrink: 0;

border-radius: 50%;

background:
#24b96b;

box-shadow:
0 0 0 3px
rgba(36, 185, 107, 0.10);
}


.preview-device-actions {
display: flex;
align-items: center;

gap: 4px;
}


.preview-device-btn {
width: 29px;
height: 29px;

display: flex;
align-items: center;
justify-content: center;

border-radius:
8px;

background:
#f3f3f3;

color:
#888888;

font-size: 8px;
}


.preview-device-btn:hover {
color:
#111111;
}


.preview-device-btn.active {
background:
var(--pw-black-soft);

color:
var(--pw-gold);
}


/* ============================================================
PREVIEW CONTAINER
============================================================ */

.project-preview-container {
width: 100%;
min-height: 518px;

flex: 1;

display: flex;
align-items: flex-start;
justify-content: center;

padding:
14px;

overflow: auto;

background:
#ededed;
}


.project-preview-container iframe {
width: 100%;
height: 490px;

border: 0;

background:
#ffffff;

box-shadow:
0 5px 20px
rgba(0, 0, 0, 0.08);

transition:
width var(--pw-transition);
}


.project-preview-container.mobile iframe {
width: 375px;
}


.project-preview-container.tablet iframe {
width: 768px;
}


.project-preview-container.desktop iframe {
width: 100%;
}


/* ============================================================
PROJECT OPTIONS
============================================================ */

.project-options-grid {
margin-top: 17px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 12px;
}


.project-option-card,
.job-option-card {
padding:
15px;

border:
1px solid var(--pw-border);

border-radius:
14px;

background:
var(--pw-soft-bg);
}


.project-option-heading {
margin-bottom: 12px;

display: flex;
align-items: center;

gap: 10px;
}


.project-option-icon {
width: 37px;
height: 37px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 10px;
}


.project-option-heading > div:last-child {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.project-option-heading strong {
color:
var(--pw-text);

font-size: 8.5px;
}


.project-option-heading span {
color:
var(--pw-muted);

font-size: 7px;

line-height: 1.5;
}


/* ============================================================
PROJECT VISIBILITY
============================================================ */

.project-visibility-options {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 7px;
}


.project-radio-option {
cursor: pointer;
}


.project-radio-option input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.project-radio-option > span {
min-height: 38px;

padding:
0 10px;

display: flex;
align-items: center;
justify-content: center;

gap: 6px;

border:
1px solid var(--pw-border);

border-radius:
10px;

background:
#ffffff;

color:
#666666;

font-size: 7.5px;
font-weight: 600;
}


.project-radio-option:hover > span {
border-color:
var(--pw-gold-border);
}


.project-radio-option
input:checked
+
span {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);

color:
#74570d;
}


/* ============================================================
COMMUNITY TOGGLE
============================================================ */

.project-community-toggle {
position: relative;

min-height: 63px;

padding:
10px 12px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 13px;

border:
1px solid var(--pw-border);

border-radius:
12px;

background:
#ffffff;

cursor: pointer;
}


.project-community-toggle > div {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.project-community-toggle strong {
color:
var(--pw-text);

font-size: 8px;
}


.project-community-toggle > div > span {
color:
var(--pw-muted);

font-size: 6.8px;

line-height: 1.5;
}


.project-community-toggle input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.project-community-toggle
input:checked
+
.toggle-switch {
background:
var(--pw-gold);
}


.project-community-toggle
input:checked
+
.toggle-switch::after {
transform:
translateX(19px);
}


/* ============================================================
PROJECT SAVE FOOTER
============================================================ */

.project-save-footer {
margin-top: 18px;

padding-top: 16px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;

border-top:
1px solid var(--pw-border);
}


/* ============================================================
PROJECT GRID
============================================================ */

.projects-content-grid {
align-items: stretch;
}


/* ============================================================
DYNAMIC PROJECT CARD
============================================================ */

.profile-project-card {
position: relative;

min-height: 245px;

padding:
17px;

display: flex;
flex-direction: column;

overflow: hidden;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
16px;

box-shadow:
var(--pw-shadow-xs);
}


.profile-project-card:hover {
transform:
translateY(-3px);

border-color:
rgba(212, 175, 55, 0.20);

box-shadow:
var(--pw-shadow-sm);
}


.profile-project-card::before {
content: "";

position: absolute;

top: 0;
left: 0;

width: 100%;
height: 3px;

background:
linear-gradient(
90deg,
var(--pw-gold),
var(--pw-gold-light)
);

opacity: 0;
}


.profile-project-card:hover::before {
opacity: 1;
}


.profile-project-icon {
width: 42px;
height: 42px;

margin-bottom: 14px;

display: flex;
align-items: center;
justify-content: center;

border-radius:
12px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 12px;
}


.profile-content-badge {
width: fit-content;

margin-bottom: 8px;

padding:
5px 8px;

display: inline-flex;
align-items: center;

gap: 4px;

border-radius:
999px;

background:
var(--pw-gold-soft);

color:
#80620e;

font-size: 6.8px;
font-weight: 700;

text-transform:
capitalize;
}


.profile-project-card h3 {
margin-bottom: 7px;

color:
var(--pw-text);

font-size: 12px;
font-weight: 650;

line-height: 1.45;
}


.profile-project-card p {
margin-bottom: 15px;

display: -webkit-box;

overflow: hidden;

color:
var(--pw-muted);

font-size: 8.5px;

line-height: 1.65;

/* -webkit-line-clamp: 3; */
-webkit-box-orient: vertical;
}


.profile-content-footer {
margin-top: auto;

padding-top: 12px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

border-top:
1px solid var(--pw-border);
}


.profile-content-footer small {
color:
var(--pw-light-muted);

font-size: 6.8px;
}


.profile-content-footer a,
.profile-content-footer button {
display: inline-flex;
align-items: center;

gap: 5px;

background:
transparent;

color:
var(--pw-text);

font-size: 7.5px;
font-weight: 600;
}


.profile-content-footer a:hover,
.profile-content-footer button:hover {
color:
var(--pw-gold-dark);
}


/* ============================================================
PROJECT CARD TOP ACTIONS
============================================================ */

.project-card-top {
margin-bottom: 12px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;
}


.project-card-menu-btn {
width: 30px;
height: 30px;

display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 50%;

background:
#f3f3f3;

color:
#666666;

font-size: 8px;
}


.project-card-menu-btn:hover {
background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


/* ============================================================
PROJECT ACTION MENU
============================================================ */

.project-action-menu {
position: fixed;

min-width: 205px;

display: none;

padding:
6px;

border:
1px solid var(--pw-border);

border-radius:
13px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-md);

z-index: 9500;
}


.project-action-menu.active {
display: block;

animation:
pwMenuAppear
0.16s ease;
}


@keyframes pwMenuAppear {

from {
opacity: 0;

transform:
translateY(-4px);
}

to {
opacity: 1;

transform:
translateY(0);
}

}


.project-action-menu button {
width: 100%;
min-height: 37px;

padding:
0 10px;

display: flex;
align-items: center;

gap: 8px;

border-radius:
9px;

background:
transparent;

color:
#4c4c4c;

text-align: left;

font-size: 7.8px;
}


.project-action-menu button i {
width: 15px;

text-align: center;

color:
#999999;

font-size: 8px;
}


.project-action-menu button:hover {
background:
#f5f5f5;

color:
#111111;
}


.project-action-menu button:hover i {
color:
var(--pw-gold-dark);
}


.project-action-menu button.danger {
color:
#ad3636;
}


.project-action-menu button.danger:hover {
background:
rgba(201, 61, 61, 0.07);

color:
var(--pw-red);
}


.project-action-menu button.danger i {
color:
var(--pw-red);
}


/* ============================================================
PROJECT FULLSCREEN PREVIEW MODAL
============================================================ */

.project-preview-modal {
position: fixed;

inset: 0;

display: none;

align-items: center;
justify-content: center;

padding:
22px;

background:
rgba(0, 0, 0, 0.78);

backdrop-filter:
blur(7px);

z-index: 12000;
}


.project-preview-modal.active {
display: flex;
}


.project-preview-modal-card {
width: 100%;
max-width: 1450px;
height: min(
900px,
calc(100vh - 44px)
);

display: flex;
flex-direction: column;

overflow: hidden;

border:
1px solid
rgba(255, 255, 255, 0.10);

border-radius:
20px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-lg);
}


.project-preview-modal-header {
min-height: 58px;

padding:
0 16px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;

border-bottom:
1px solid var(--pw-border);

background:
#ffffff;
}


.project-preview-modal-header > div {
min-width: 0;

display: flex;
align-items: center;

gap: 8px;
}


.project-preview-modal-header > div i {
color:
var(--pw-gold-dark);

font-size: 10px;
}


.project-preview-modal-header span {
overflow: hidden;

color:
var(--pw-text);

font-size: 9px;
font-weight: 600;

white-space: nowrap;
text-overflow: ellipsis;
}


.project-preview-modal-header button {
width: 32px;
height: 32px;

display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 50%;

background:
#f3f3f3;

color:
#555555;

font-size: 9px;
}


.project-fullscreen-preview {
flex: 1;

padding:
15px;

overflow: auto;

background:
#ececec;
}


.project-fullscreen-preview iframe {
width: 100%;
height: 100%;
min-height: 600px;

border: 0;

background:
#ffffff;

box-shadow:
0 5px 25px
rgba(0, 0, 0, 0.08);
}


/* ============================================================
PROJECT DELETE MODAL
============================================================ */

#deleteProjectModal
.modal-icon {
background:
rgba(201, 61, 61, 0.08);

color:
var(--pw-red);
}


/* ============================================================
RESPONSIVE PROJECT WORKSPACE
============================================================ */

@media (max-width: 1180px) {

.project-workspace {
grid-template-columns:
1fr;
}


.project-code-panel {
min-height: 460px;

border-right: 0;

border-bottom:
1px solid #252525;
}


.project-code-textarea {
min-height: 420px;
}


.project-preview-panel {
min-height: 480px;
}


.project-preview-container {
min-height: 438px;
}


.project-preview-container iframe {
height: 410px;
}

}


/* ============================================================
RESPONSIVE PROJECT TABLET
============================================================ */

@media (max-width: 820px) {

.project-information-grid {
grid-template-columns:
1fr;
}


.project-description-field {
grid-column:
auto;
}


.project-workspace-toolbar {
align-items: flex-start;
flex-direction: column;
}


.project-editor-tabs,
.project-editor-actions {
width: 100%;
}


.project-editor-actions {
justify-content: flex-start;
}


.project-options-grid {
grid-template-columns:
1fr;
}


.project-save-footer {
align-items: stretch;
flex-direction: column;
}


.project-save-footer
.composer-actions {
justify-content: flex-end;
}

}


/* ============================================================
RESPONSIVE PROJECT MOBILE
============================================================ */

@media (max-width: 600px) {

#projectForm {
padding:
15px;
}


.project-creator-header {
padding:
15px;
}


.project-editor-tabs {
display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
}


.project-editor-tab {
width: 100%;

padding:
0 5px;
}


.project-editor-actions {
display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
}


.project-tool-btn {
width: 100%;

padding:
0 5px;
}


.project-code-panel,
.project-workspace {
min-height: 410px;
}


.project-code-textarea {
min-height: 370px;

font-size: 8px;
}


.project-preview-panel {
min-height: 400px;
}


.project-preview-container {
min-height: 358px;

padding:
8px;
}


.project-preview-container iframe {
height: 340px;
}


.project-preview-container.mobile iframe,
.project-preview-container.tablet iframe {
width: 100%;
}


.project-visibility-options {
grid-template-columns:
1fr;
}


.project-save-footer
.composer-actions {
display: grid;

grid-template-columns:
1fr;
}


.project-save-footer
.composer-actions button {
width: 100%;
}


.project-preview-modal {
padding:
8px;
}


.project-preview-modal-card {
height:
calc(100vh - 16px);

border-radius:
15px;
}


.project-fullscreen-preview {
padding:
7px;
}


.project-fullscreen-preview iframe {
min-height:
calc(100vh - 95px);
}

}



/* ============================================================
COURSE DASHBOARD TABS
============================================================ */

.course-dashboard-tabs {
width: 100%;

margin-bottom: 18px;

padding: 6px;

display: grid;

grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);

gap: 6px;

border:
1px solid var(--pw-border);

border-radius:
14px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-xs);
}


.course-dashboard-tab {
min-height: 40px;

padding:
0 10px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

border-radius:
10px;

background:
transparent;

color:
#666666;

font-size: 7.8px;
font-weight: 600;
}


.course-dashboard-tab i {
font-size: 9px;
}


.course-dashboard-tab:hover {
background:
#f6f6f6;

color:
#222222;
}


.course-dashboard-tab.active {
background:
var(--pw-black-soft);

color:
#ffffff;
}


.course-dashboard-tab.active i {
color:
var(--pw-gold);
}


/* ============================================================
COURSE VIEWS
============================================================ */

.course-dashboard-view {
display: none;
}


.course-dashboard-view.active {
display: block;

animation:
pwCourseViewIn
0.22s ease;
}


@keyframes pwCourseViewIn {

from {
opacity: 0;
transform:
translateY(4px);
}

to {
opacity: 1;
transform:
translateY(0);
}

}


.course-view-heading {
margin-bottom: 16px;

display: flex;
align-items: flex-end;
justify-content: space-between;

gap: 16px;
}


.course-view-heading > div:first-child {
min-width: 0;
}


.course-view-heading h3 {
margin-bottom: 4px;

color:
var(--pw-text);

font-size: 14px;
font-weight: 650;
}


.course-view-heading p {
color:
var(--pw-muted);

font-size: 8.5px;

line-height: 1.6;
}


/* ============================================================
COURSE FILTERS
============================================================ */

.course-filter-group {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 7px;
}


.course-filter-group select {
min-width: 150px;
height: 38px;

padding:
0 31px 0 11px;

border:
1px solid var(--pw-border);

border-radius:
999px;

background:
#ffffff;

color:
#555555;

font-size: 7.5px;
}


.course-filter-group select:focus {
border-color:
var(--pw-gold);

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.07);
}


/* ============================================================
COURSE GRIDS
============================================================ */

.available-courses-grid,
.live-sessions-grid {
display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

gap: 16px;
}


/* ============================================================
DYNAMIC COURSE CARD
============================================================ */

.profile-course-card,
.available-course-card,
.live-session-card {
position: relative;

overflow: hidden;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
17px;

box-shadow:
var(--pw-shadow-xs);
}


.profile-course-card:hover,
.available-course-card:hover,
.live-session-card:hover {
transform:
translateY(-3px);

border-color:
rgba(212, 175, 55, 0.20);

box-shadow:
var(--pw-shadow-sm);
}


.course-card-image {
position: relative;

width: 100%;
height: 155px;

overflow: hidden;

background:
linear-gradient(
135deg,
#0f0f0f,
#1b1b1b
);
}


.course-card-image img {
width: 100%;
height: 100%;

object-fit: cover;
}


.course-placeholder {
width: 100%;
height: 100%;

display: flex;
align-items: center;
justify-content: center;

color:
var(--pw-gold);

font-size: 24px;
}


.course-card-type {
position: absolute;

top: 10px;
left: 10px;

min-height: 25px;

padding:
0 8px;

display: inline-flex;
align-items: center;

gap: 5px;

border-radius:
999px;

background:
rgba(0, 0, 0, 0.72);

color:
#ffffff;

backdrop-filter:
blur(8px);

font-size: 6.8px;
font-weight: 600;
}


.course-card-type i {
color:
var(--pw-gold);
}


.course-card-body {
padding:
16px;
}


.course-card-body > span {
display: block;

margin-bottom: 5px;

color:
var(--pw-gold-dark);

font-size: 6.8px;
font-weight: 700;

letter-spacing:
0.5px;

text-transform:
uppercase;
}


.course-card-body h3 {
margin-bottom: 7px;

color:
var(--pw-text);

font-size: 12px;
font-weight: 650;

line-height: 1.45;
}


.course-card-body p {
display: -webkit-box;

overflow: hidden;

margin-bottom: 12px;

color:
var(--pw-muted);

font-size: 8px;

line-height: 1.6;

/* -webkit-line-clamp: 3; */
-webkit-box-orient: vertical;
}


.course-card-meta {
margin-bottom: 12px;

display: flex;
flex-wrap: wrap;

gap: 8px 12px;
}


.course-card-meta span {
display: inline-flex;
align-items: center;

gap: 5px;

color:
var(--pw-muted);

font-size: 7px;
}


.course-card-meta i {
color:
var(--pw-gold-dark);

font-size: 7px;
}


.course-card-price {
margin-top: 10px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;
}


.course-card-price strong {
color:
var(--pw-text);

font-size: 13px;
}


.course-card-price button {
min-height: 34px;

padding:
0 11px;

border-radius:
999px;

background:
var(--pw-black-soft);

color:
#ffffff;

font-size: 7.5px;
font-weight: 600;
}


.course-card-price button:hover {
background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
COURSE PROGRESS
============================================================ */

.course-progress {
margin-top: 12px;

display: flex;
align-items: center;

gap: 9px;
}


.course-progress > div {
flex: 1;

height: 5px;

overflow: hidden;

border-radius:
999px;

background:
#eeeeee;
}


.course-progress > div > span {
display: block;

height: 100%;

border-radius:
999px;

background:
linear-gradient(
90deg,
var(--pw-gold),
var(--pw-gold-light)
);
}


.course-progress small {
color:
var(--pw-muted);

font-size: 6.8px;
}


/* ============================================================
COURSE STATUS
============================================================ */

.course-enrollment-status {
width: fit-content;

margin-top: 10px;

padding:
5px 8px;

display: inline-flex;
align-items: center;

gap: 5px;

border-radius:
999px;

font-size: 6.8px;
font-weight: 700;
}


.course-enrollment-status.pending {
background:
rgba(204, 131, 23, 0.10);

color:
#95600d;
}


.course-enrollment-status.approved {
background:
rgba(25, 135, 84, 0.08);

color:
#176b46;
}


.course-enrollment-status.rejected {
background:
rgba(201, 61, 61, 0.08);

color:
#a53232;
}


/* ============================================================
LIVE COURSE LEGEND
============================================================ */

.live-course-legend {
flex-shrink: 0;
}


.live-course-legend span {
display: inline-flex;
align-items: center;

gap: 6px;

color:
var(--pw-muted);

font-size: 7.5px;
}


.live-course-legend i {
color:
#28b96d;

font-size: 6px;
}


/* ============================================================
LIVE SESSION CARD
============================================================ */

.live-session-card {
padding:
16px;
}


.live-session-card-header {
margin-bottom: 13px;

display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 10px;
}


.live-session-date {
width: 52px;
height: 57px;

flex-shrink: 0;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

border-radius:
12px;

background:
var(--pw-black-soft);

color:
#ffffff;
}


.live-session-date strong {
font-size: 15px;

line-height: 1;
}


.live-session-date span {
margin-top: 3px;

color:
var(--pw-gold);

font-size: 6.8px;
font-weight: 700;

text-transform:
uppercase;
}


.live-session-availability {
min-height: 25px;

padding:
0 8px;

display: inline-flex;
align-items: center;

border-radius:
999px;

background:
rgba(25, 135, 84, 0.08);

color:
#176b46;

font-size: 6.5px;
font-weight: 700;
}


.live-session-card h3 {
margin-bottom: 6px;

color:
var(--pw-text);

font-size: 11px;
}


.live-session-card p {
margin-bottom: 12px;

color:
var(--pw-muted);

font-size: 8px;

line-height: 1.6;
}


.live-session-meta {
display: flex;
flex-direction: column;

gap: 6px;
}


.live-session-meta span {
display: inline-flex;
align-items: center;

gap: 6px;

color:
#555555;

font-size: 7.5px;
}


.live-session-meta i {
width: 13px;

color:
var(--pw-gold-dark);

text-align: center;

font-size: 7px;
}


/* ============================================================
COURSE DETAILS MODAL
============================================================ */

.course-details-modal,
.course-payment-modal {
overflow-y: auto;
}


.course-details-modal-card {
position: relative;

width: 100%;
max-width: 720px;

margin:
auto;

overflow: hidden;

border-radius:
21px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-lg);
}


.course-detail-image {
position: relative;

width: 100%;
height: 230px;

overflow: hidden;

background:
linear-gradient(
135deg,
#0b0b0b,
#1c1c1c
);
}


.course-detail-image img {
display: none;

width: 100%;
height: 100%;

object-fit: cover;
}


.course-detail-image img.active {
display: block;
}


.course-detail-image-placeholder {
width: 100%;
height: 100%;

display: flex;
align-items: center;
justify-content: center;

color:
var(--pw-gold);

font-size: 34px;
}


.course-detail-image-placeholder.hidden {
display: none;
}


.course-details-modal-card
.modal-close-btn {
z-index: 5;

background:
rgba(255, 255, 255, 0.92);
}


.course-detail-body {
padding:
21px;
}


.course-detail-topline {
margin-bottom: 10px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 6px;
}


.course-type-badge,
.course-level-badge {
min-height: 25px;

padding:
0 8px;

display: inline-flex;
align-items: center;

border-radius:
999px;

font-size: 6.7px;
font-weight: 700;
}


.course-type-badge {
background:
var(--pw-black-soft);

color:
var(--pw-gold);
}


.course-level-badge {
background:
var(--pw-gold-soft);

color:
#785c0e;
}


.course-detail-body > h3 {
margin-bottom: 8px;

color:
var(--pw-text);

font-size: 19px;
font-weight: 700;
}


.course-detail-description {
color:
var(--pw-muted);

font-size: 9px;

line-height: 1.75;
}


/* ============================================================
COURSE DETAIL INFORMATION
============================================================ */

.course-detail-information {
margin-top: 17px;

display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

gap: 9px;
}


.course-detail-information > div {
min-height: 65px;

padding:
11px;

display: flex;
align-items: center;

gap: 9px;

border:
1px solid var(--pw-border);

border-radius:
12px;

background:
var(--pw-soft-bg);
}


.course-detail-information > div > i {
width: 31px;
height: 31px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
9px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 8px;
}


.course-detail-information span {
min-width: 0;

display: flex;
flex-direction: column;

gap: 1px;
}


.course-detail-information small {
color:
var(--pw-muted);

font-size: 6.5px;
}


.course-detail-information strong {
overflow: hidden;

color:
var(--pw-text);

font-size: 8px;

white-space: nowrap;
text-overflow: ellipsis;
}


/* ============================================================
LIVE SESSION SELECTION
============================================================ */

.course-live-selection {
display: none;

margin-top: 18px;

padding:
15px;

border:
1px solid var(--pw-border);

border-radius:
14px;

background:
#fafafa;
}


.course-live-selection.active {
display: block;
}


.course-selection-heading {
margin-bottom: 12px;

display: flex;
align-items: center;

gap: 9px;
}


.course-selection-heading > i {
width: 35px;
height: 35px;

display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius:
10px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 9px;
}


.course-selection-heading > div {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.course-selection-heading strong {
color:
var(--pw-text);

font-size: 8.5px;
}


.course-selection-heading span {
color:
var(--pw-muted);

font-size: 7px;
}


.course-session-options {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 8px;
}


.course-session-option {
position: relative;

min-height: 62px;

padding:
10px;

display: flex;
align-items: center;

gap: 9px;

border:
1px solid var(--pw-border);

border-radius:
11px;

background:
#ffffff;

cursor: pointer;
}


.course-session-option:hover {
border-color:
var(--pw-gold-border);
}


.course-session-option.selected {
border-color:
var(--pw-gold);

background:
var(--pw-gold-soft);
}


.course-session-option-date {
width: 39px;
height: 39px;

flex-shrink: 0;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

border-radius:
9px;

background:
var(--pw-black-soft);

color:
#ffffff;
}


.course-session-option-date strong {
font-size: 11px;
}


.course-session-option-date span {
color:
var(--pw-gold);

font-size: 5.8px;
}


.course-session-option-info {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.course-session-option-info strong {
color:
var(--pw-text);

font-size: 7.8px;
}


.course-session-option-info span {
color:
var(--pw-muted);

font-size: 6.8px;
}


/* ============================================================
REGISTER BUTTON
============================================================ */

.course-register-btn {
width: 100%;
min-height: 42px;

margin-top: 18px;

display: flex;
align-items: center;
justify-content: center;

gap: 7px;

border-radius:
999px;

background:
var(--pw-black-soft);

color:
#ffffff;

font-size: 8.5px;
font-weight: 600;
}


.course-register-btn:hover {
background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
PAYMENT MODAL
============================================================ */

.course-payment-card {
position: relative;

width: 100%;
max-width: 720px;

margin:
auto;

padding:
23px;

border-radius:
21px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-lg);
}


.course-payment-header {
padding-right: 35px;

display: flex;
align-items: flex-start;

gap: 12px;
}


.payment-main-icon {
width: 47px;
height: 47px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
14px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 14px;
}


.course-payment-header > div:last-child {
min-width: 0;
}


.course-payment-header span {
display: block;

color:
var(--pw-gold-dark);

font-size: 6.8px;
font-weight: 700;

letter-spacing:
1px;

text-transform:
uppercase;
}


.course-payment-header h3 {
margin:
2px 0 4px;

color:
var(--pw-text);

font-size: 16px;
}


.course-payment-header p {
color:
var(--pw-muted);

font-size: 8px;

line-height: 1.6;
}


/* ============================================================
PAYMENT COURSE SUMMARY
============================================================ */

.payment-course-summary {
margin-top: 18px;

display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

overflow: hidden;

border:
1px solid var(--pw-border);

border-radius:
13px;

background:
var(--pw-soft-bg);
}


.payment-course-summary > div {
min-width: 0;

padding:
12px;

border-right:
1px solid var(--pw-border);
}


.payment-course-summary > div:last-child {
border-right: 0;
}


.payment-course-summary span {
display: block;

margin-bottom: 3px;

color:
var(--pw-muted);

font-size: 6.5px;
}


.payment-course-summary strong {
display: block;

overflow: hidden;

color:
var(--pw-text);

font-size: 8px;

white-space: nowrap;
text-overflow: ellipsis;
}


/* ============================================================
PAYMENT METHODS
============================================================ */

.payment-method-section {
margin-top: 19px;
}


.payment-method-section > label {
display: block;

margin-bottom: 7px;

color:
#333333;

font-size: 8.5px;
font-weight: 600;
}


.payment-method-grid {
display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

gap: 8px;
}


.payment-method-option {
cursor: pointer;
}


.payment-method-option input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.payment-method-content {
min-height: 70px;

padding:
10px;

display: flex;
align-items: center;

gap: 9px;

border:
1px solid var(--pw-border);

border-radius:
12px;

background:
var(--pw-soft-bg);
}


.payment-method-option:hover
.payment-method-content {
border-color:
var(--pw-gold-border);

background:
#ffffff;
}


.payment-method-option
input:checked
+
.payment-method-content {
border-color:
var(--pw-gold);

background:
var(--pw-gold-soft);
}


.payment-method-icon {
width: 36px;
height: 36px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
10px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 10px;
}


.payment-method-content > span:last-child {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.payment-method-content strong {
color:
var(--pw-text);

font-size: 8px;
}


.payment-method-content small {
color:
var(--pw-muted);

font-size: 6.5px;
}


/* ============================================================
PAYMENT INSTRUCTIONS
============================================================ */

.payment-instructions {
display: none;

margin-top: 15px;

padding:
14px;

border:
1px solid var(--pw-gold-border);

border-radius:
13px;

background:
rgba(212, 175, 55, 0.05);
}


.payment-instructions.active {
display: block;
}


.payment-instructions-heading {
margin-bottom: 11px;

display: flex;
align-items: center;

gap: 9px;
}


.payment-instructions-heading > i {
width: 34px;
height: 34px;

display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius:
10px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 9px;
}


.payment-instructions-heading > div {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.payment-instructions-heading strong {
color:
var(--pw-text);

font-size: 8.5px;
}


.payment-instructions-heading span {
color:
var(--pw-muted);

font-size: 6.8px;
}


/* ============================================================
PAYMENT DESTINATION
============================================================ */

.payment-destination-box {
min-height: 59px;

padding:
10px 11px;

display: flex;
align-items: center;

gap: 10px;

border:
1px solid var(--pw-border);

border-radius:
11px;

background:
#ffffff;
}


.payment-destination-box > span {
color:
var(--pw-muted);

font-size: 6.8px;
}


.payment-destination-box strong {
min-width: 0;

flex: 1;

overflow: hidden;

color:
var(--pw-text);

font-size: 10px;

text-align: right;

white-space: nowrap;
text-overflow: ellipsis;
}


.copy-payment-detail-btn {
min-height: 31px;

padding:
0 9px;

display: inline-flex;
align-items: center;

gap: 5px;

flex-shrink: 0;

border-radius:
999px;

background:
#f2f2f2;

color:
#555555;

font-size: 6.8px;
}


.copy-payment-detail-btn:hover {
background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


.payment-admin-note {
margin-top: 9px;

color:
var(--pw-muted);

font-size: 7.2px;

line-height: 1.6;
}


/* ============================================================
PAYPAL
============================================================ */

.paypal-payment-link {
min-height: 40px;

padding:
0 13px;

display: flex;
align-items: center;
justify-content: center;

gap: 7px;

border-radius:
999px;

background:
#111111;

color:
#ffffff;

font-size: 7.5px;
font-weight: 600;
}


.paypal-payment-link:hover {
background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
RECEIPT
============================================================ */

.course-receipt-section {
margin-top: 17px;

padding:
14px;

border:
1px solid var(--pw-border);

border-radius:
13px;

background:
#fafafa;
}


.receipt-heading {
margin-bottom: 11px;
}


.receipt-heading strong {
display: block;

margin-bottom: 2px;

color:
var(--pw-text);

font-size: 8.5px;
}


.receipt-heading span {
color:
var(--pw-muted);

font-size: 6.8px;

line-height: 1.5;
}


.receipt-upload-btn {
min-height: 38px;

padding:
0 12px;

display: inline-flex;
align-items: center;

gap: 6px;

border:
1px dashed
rgba(212, 175, 55, 0.45);

border-radius:
10px;

background:
rgba(212, 175, 55, 0.05);

color:
#795d10;

font-size: 7.5px;
font-weight: 600;
}


.receipt-upload-btn:hover {
background:
var(--pw-gold-soft);
}


.receipt-file-preview {
display: none;

margin-top: 10px;

min-height: 57px;

padding:
9px;

align-items: center;

gap: 9px;

border:
1px solid var(--pw-border);

border-radius:
11px;

background:
#ffffff;
}


.receipt-file-preview.active {
display: flex;
}


.receipt-preview-icon {
width: 35px;
height: 35px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
9px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 9px;
}


.receipt-file-preview > div:nth-child(2) {
min-width: 0;

flex: 1;
}


.receipt-file-preview strong {
display: block;

overflow: hidden;

color:
var(--pw-text);

font-size: 7.5px;

white-space: nowrap;
text-overflow: ellipsis;
}


.receipt-file-preview span {
color:
var(--pw-muted);

font-size: 6.5px;
}


.receipt-file-preview button {
width: 28px;
height: 28px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
#f3f3f3;

color:
#666666;

font-size: 7px;
}


/* ============================================================
TRANSACTION REFERENCE
============================================================ */

.course-payment-reference {
margin-top: 15px;
}


.course-payment-reference label {
display: block;

margin-bottom: 6px;

color:
#333333;

font-size: 8px;
font-weight: 600;
}


.course-payment-reference label small {
margin-left: 4px;

color:
var(--pw-light-muted);

font-size: 6.5px;
}


.course-payment-reference input {
width: 100%;
height: 41px;

padding:
0 11px;

border:
1px solid var(--pw-border);

border-radius:
11px;

background:
#fafafa;

color:
var(--pw-text);

font-size: 8px;
}


.course-payment-reference input:focus {
border-color:
var(--pw-gold);

background:
#ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.07);
}


/* ============================================================
PAYMENT FOOTER
============================================================ */

.course-payment-footer {
margin-top: 18px;

padding-top: 15px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 13px;

border-top:
1px solid var(--pw-border);
}


.course-payment-footer p {
min-width: 0;

display: flex;
align-items: flex-start;

gap: 6px;

color:
var(--pw-muted);

font-size: 6.8px;

line-height: 1.5;
}


.course-payment-footer p i {
margin-top: 1px;

flex-shrink: 0;

color:
var(--pw-gold-dark);
}


.submit-course-payment-btn {
min-height: 40px;

padding:
0 13px;

display: inline-flex;
align-items: center;

gap: 6px;

flex-shrink: 0;

border-radius:
999px;

background:
var(--pw-black-soft);

color:
#ffffff;

font-size: 7.5px;
font-weight: 600;
}


.submit-course-payment-btn:hover {
background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
PAYMENT STATUS LEGEND
============================================================ */

.payment-status-legend {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 6px;
}


.payment-legend {
min-height: 29px;

padding:
0 9px;

display: inline-flex;
align-items: center;

gap: 5px;

border-radius:
999px;

font-size: 6.8px;
font-weight: 600;
}


.payment-legend.pending {
background:
rgba(204, 131, 23, 0.09);

color:
#96610f;
}


.payment-legend.approved {
background:
rgba(25, 135, 84, 0.08);

color:
#176b46;
}


.payment-legend.rejected {
background:
rgba(201, 61, 61, 0.08);

color:
#a93434;
}


/* ============================================================
COURSE PAYMENTS LIST
============================================================ */

.course-payments-list {
display: flex;
flex-direction: column;

gap: 10px;
}


.course-payment-item {
padding:
14px;

display: flex;
align-items: center;

gap: 11px;

border:
1px solid var(--pw-border);

border-radius:
14px;

background:
#ffffff;
}


.course-payment-item-icon {
width: 39px;
height: 39px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 10px;
}


.course-payment-item-info {
min-width: 0;

flex: 1;
}


.course-payment-item-info strong {
display: block;

overflow: hidden;

color:
var(--pw-text);

font-size: 8.5px;

white-space: nowrap;
text-overflow: ellipsis;
}


.course-payment-item-info span {
display: block;

margin-top: 2px;

color:
var(--pw-muted);

font-size: 6.8px;
}


.course-payment-item-status {
min-height: 27px;

padding:
0 8px;

flex-shrink: 0;

display: inline-flex;
align-items: center;

border-radius:
999px;

font-size: 6.5px;
font-weight: 700;
}


/* ============================================================
COURSE ENROLLMENT STATUS MODAL
============================================================ */

.course-status-card {
max-width: 420px;
}


.course-status-icon {
width: 59px;
height: 59px;

margin:
0 auto 11px;

display: flex;
align-items: center;
justify-content: center;

border-radius:
18px;

background:
rgba(204, 131, 23, 0.09);

color:
var(--pw-orange);

font-size: 20px;
}


.course-status-icon.approved {
background:
rgba(25, 135, 84, 0.08);

color:
var(--pw-green);
}


.course-status-icon.rejected {
background:
rgba(201, 61, 61, 0.08);

color:
var(--pw-red);
}


.course-status-label {
width: fit-content;

margin:
0 auto 7px;

padding:
5px 9px;

display: block;

border-radius:
999px;

background:
rgba(204, 131, 23, 0.09);

color:
#96610f;

font-size: 6.8px;
font-weight: 700;

text-transform:
uppercase;
}


/* ============================================================
RESPONSIVE COURSES
============================================================ */

@media (max-width: 1100px) {

.available-courses-grid,
.live-sessions-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}


.course-dashboard-tabs {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

}


@media (max-width: 760px) {

.course-view-heading {
align-items: stretch;
flex-direction: column;
}


.course-filter-group {
width: 100%;
}


.course-filter-group select {
flex: 1;

min-width: 0;
}


.course-detail-information {
grid-template-columns:
1fr;
}


.payment-method-grid {
grid-template-columns:
1fr;
}


.payment-course-summary {
grid-template-columns:
1fr;
}


.payment-course-summary > div {
border-right: 0;

border-bottom:
1px solid var(--pw-border);
}


.payment-course-summary > div:last-child {
border-bottom: 0;
}


.course-session-options {
grid-template-columns:
1fr;
}


.course-payment-footer {
align-items: stretch;
flex-direction: column;
}


.submit-course-payment-btn {
width: 100%;

justify-content: center;
}

}


@media (max-width: 560px) {

.course-dashboard-tabs {
grid-template-columns:
1fr;
}


.available-courses-grid,
.live-sessions-grid {
grid-template-columns:
1fr;
}


.course-filter-group {
flex-direction: column;
}


.course-filter-group select {
width: 100%;
}


.course-details-modal-card,
.course-payment-card {
border-radius:
16px;
}


.course-detail-image {
height: 185px;
}


.course-detail-body,
.course-payment-card {
padding:
16px;
}


.payment-destination-box {
align-items: flex-start;
flex-direction: column;
}


.payment-destination-box strong {
width: 100%;

text-align: left;
}


.copy-payment-detail-btn {
align-self: flex-start;
}

}


/* ============================================================
SAVED CONTENT
============================================================ */

#saved .content-grid {
align-items: stretch;
}


.saved-content-card {
position: relative;

min-height: 220px;

padding: 17px;

display: flex;
flex-direction: column;

background: #ffffff;

border:
1px solid var(--pw-border);

border-radius: 16px;

box-shadow:
var(--pw-shadow-xs);
}


.saved-content-card:hover {
transform:
translateY(-3px);

border-color:
rgba(212, 175, 55, 0.22);

box-shadow:
var(--pw-shadow-sm);
}


.saved-content-card-header {
margin-bottom: 12px;

display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 10px;
}


.saved-content-type {
min-height: 25px;

padding:
0 8px;

display: inline-flex;
align-items: center;

gap: 5px;

border-radius:
999px;

background:
var(--pw-gold-soft);

color:
#765a0e;

font-size: 6.8px;
font-weight: 700;
}


.saved-content-type i {
font-size: 7px;
}


.saved-remove-btn {
width: 29px;
height: 29px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
#f3f3f3;

color:
#666666;

font-size: 8px;
}


.saved-remove-btn:hover {
background:
rgba(201, 61, 61, 0.08);

color:
var(--pw-red);
}


.saved-content-card h3 {
margin-bottom: 7px;

color:
var(--pw-text);

font-size: 11.5px;
font-weight: 650;

line-height: 1.45;
}


.saved-content-card p {
display: -webkit-box;

overflow: hidden;

margin-bottom: 15px;

color:
var(--pw-muted);

font-size: 8.3px;

line-height: 1.65;

/* -webkit-line-clamp: 3; */
-webkit-box-orient: vertical;
}


.saved-content-meta {
margin-top: auto;

padding-top: 11px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

border-top:
1px solid var(--pw-border);
}


.saved-content-meta span {
color:
var(--pw-light-muted);

font-size: 6.8px;
}


.saved-content-meta a,
.saved-content-meta button {
display: inline-flex;
align-items: center;

gap: 5px;

background:
transparent;

color:
var(--pw-text);

font-size: 7.3px;
font-weight: 600;
}


.saved-content-meta a:hover,
.saved-content-meta button:hover {
color:
var(--pw-gold-dark);
}


/* ============================================================
JOB CREATOR
============================================================ */

.job-creator-card {
display: none;

width: 100%;

margin-bottom: 20px;

overflow: hidden;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
var(--pw-radius-md);

box-shadow:
var(--pw-shadow-md);
}


.job-creator-card.active {
display: block;

animation:
pwJobCreatorOpen
0.28s ease;
}


@keyframes pwJobCreatorOpen {

from {
opacity: 0;

transform:
translateY(-5px);
}

to {
opacity: 1;

transform:
translateY(0);
}

}


.job-creator-header {
min-height: 82px;

padding:
17px 20px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 18px;

border-bottom:
1px solid var(--pw-border);

background:
linear-gradient(
180deg,
#ffffff,
#fbfbfb
);
}


.job-creator-header > div {
min-width: 0;
}


.job-creator-header h3 {
margin-bottom: 3px;

color:
var(--pw-text);

font-size: 15px;
font-weight: 650;
}


.job-creator-header p {
max-width: 650px;

color:
var(--pw-muted);

font-size: 8.5px;

line-height: 1.6;
}


/* ============================================================
JOB FORM
============================================================ */

#jobForm {
padding:
20px;
}


.job-form-grid {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap:
0 14px;
}


.job-form-grid select {
appearance: none;

background-image:
linear-gradient(
45deg,
transparent 50%,
#888888 50%
),
linear-gradient(
135deg,
#888888 50%,
transparent 50%
);

background-position:
calc(100% - 17px) 18px,
calc(100% - 12px) 18px;

background-size:
5px 5px,
5px 5px;

background-repeat:
no-repeat;
}


/* ============================================================
JOB OPTION CARD
============================================================ */

.job-option-card {
margin-bottom: 17px;
}


.job-option-card
.availability-toggle {
margin: 0;
}


/* ============================================================
JOB APPLICATION SETTINGS
============================================================ */

.job-application-settings {
margin-top: 5px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 12px;
}


.job-application-settings
.job-option-card {
margin-bottom: 0;
}


.job-contact-grid {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 10px;
}


.job-contact-grid
.composer-field {
margin-bottom: 0;
}


/* ============================================================
JOB LIST
============================================================ */

.profile-jobs-list {
width: 100%;

display: flex;
flex-direction: column;

gap: 12px;
}


/* ============================================================
DYNAMIC JOB CARD
============================================================ */

.member-job-card {
position: relative;

width: 100%;

padding:
17px;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
16px;

box-shadow:
var(--pw-shadow-xs);
}


.member-job-card:hover {
border-color:
rgba(212, 175, 55, 0.20);

box-shadow:
var(--pw-shadow-sm);
}


.member-job-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 15px;
}


.member-job-main {
min-width: 0;

display: flex;
align-items: flex-start;

gap: 11px;
}


.member-job-icon {
width: 43px;
height: 43px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
12px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 11px;
}


.member-job-heading {
min-width: 0;
}


.member-job-heading h3 {
margin-bottom: 3px;

color:
var(--pw-text);

font-size: 11px;
font-weight: 650;

line-height: 1.4;
}


.member-job-heading p {
color:
var(--pw-muted);

font-size: 7.3px;
}


.member-job-status {
min-height: 26px;

padding:
0 8px;

flex-shrink: 0;

display: inline-flex;
align-items: center;

border-radius:
999px;

font-size: 6.7px;
font-weight: 700;

text-transform:
uppercase;
}


.member-job-status.active,
.member-job-status.published {
background:
rgba(25, 135, 84, 0.08);

color:
#176b46;
}


.member-job-status.draft {
background:
rgba(204, 131, 23, 0.10);

color:
#95600d;
}


.member-job-status.closed,
.member-job-status.unpublished {
background:
#eeeeee;

color:
#666666;
}


/* ============================================================
JOB DESCRIPTION
============================================================ */

.member-job-description {
margin-top: 13px;

color:
#4f4f4f;

font-size: 8.5px;

line-height: 1.7;
}


.member-job-description p {
margin-bottom: 7px;
}


.member-job-description ul,
.member-job-description ol {
margin:
7px 0;

padding-left:
21px;
}


.member-job-description a {
color:
var(--pw-gold-dark);

text-decoration:
underline;
}


/* ============================================================
JOB META
============================================================ */

.member-job-meta {
margin-top: 13px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 7px;
}


.member-job-meta span {
min-height: 27px;

padding:
0 8px;

display: inline-flex;
align-items: center;

gap: 5px;

border-radius:
999px;

background:
#f5f5f5;

color:
#666666;

font-size: 6.8px;
}


.member-job-meta i {
color:
var(--pw-gold-dark);

font-size: 7px;
}


/* ============================================================
JOB SKILLS
============================================================ */

.member-job-skills {
margin-top: 10px;

display: flex;
flex-wrap: wrap;

gap: 5px;
}


.member-job-skill {
padding:
5px 8px;

border:
1px solid
rgba(212, 175, 55, 0.12);

border-radius:
999px;

background:
var(--pw-gold-soft);

color:
#755a0e;

font-size: 6.5px;
font-weight: 600;
}


/* ============================================================
JOB FOOTER
============================================================ */

.member-job-footer {
margin-top: 14px;

padding-top: 12px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 12px;

border-top:
1px solid var(--pw-border);
}


.member-job-stats {
display: flex;
align-items: center;

gap: 12px;
}


.member-job-stats span,
.member-job-stats button {
display: inline-flex;
align-items: center;

gap: 5px;

background:
transparent;

color:
var(--pw-muted);

font-size: 7px;
}


.member-job-stats i {
color:
var(--pw-gold-dark);

font-size: 7px;
}


.member-job-actions {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 5px;
}


.member-job-action-btn {
min-height: 31px;

padding:
0 9px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 5px;

border-radius:
999px;

background:
#f4f4f4;

color:
#555555;

font-size: 6.8px;
font-weight: 600;
}


.member-job-action-btn:hover {
background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


.member-job-action-btn.primary {
background:
var(--pw-black-soft);

color:
#ffffff;
}


.member-job-action-btn.primary:hover {
background:
var(--pw-gold);

color:
#111111;
}


.member-job-action-btn.danger:hover {
background:
rgba(201, 61, 61, 0.08);

color:
var(--pw-red);
}


/* ============================================================
JOB APPLICANTS PANEL
============================================================ */

.job-applicants-summary {
padding:
12px 14px;

display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

gap: 7px;

border-bottom:
1px solid var(--pw-border);

background:
#fafafa;
}


.job-applicants-summary > div {
min-width: 0;

padding:
10px 7px;

text-align: center;

border:
1px solid var(--pw-border);

border-radius:
10px;

background:
#ffffff;
}


.job-applicants-summary strong {
display: block;

margin-bottom: 2px;

color:
var(--pw-text);

font-size: 13px;
}


.job-applicants-summary span {
display: block;

overflow: hidden;

color:
var(--pw-muted);

font-size: 6.3px;

white-space: nowrap;
text-overflow: ellipsis;
}


.job-applicants-list {
flex: 1;

padding:
14px;

overflow-y: auto;
}


/* ============================================================
APPLICANT CARD
============================================================ */

.job-applicant-card {
padding:
12px;

margin-bottom: 9px;

border:
1px solid var(--pw-border);

border-radius:
13px;

background:
#ffffff;
}


.job-applicant-card:last-child {
margin-bottom: 0;
}


.job-applicant-card:hover {
border-color:
rgba(212, 175, 55, 0.18);
}


.job-applicant-top {
display: flex;
align-items: center;

gap: 9px;
}


.job-applicant-top img {
width: 39px;
height: 39px;

flex-shrink: 0;

object-fit: cover;

border-radius: 50%;
}


.job-applicant-info {
min-width: 0;

flex: 1;
}


.job-applicant-info strong {
display: block;

overflow: hidden;

color:
var(--pw-text);

font-size: 8.5px;

white-space: nowrap;
text-overflow: ellipsis;
}


.job-applicant-info span {
display: block;

margin-top: 2px;

color:
var(--pw-muted);

font-size: 6.8px;
}


.job-applicant-status {
min-height: 24px;

padding:
0 7px;

display: inline-flex;
align-items: center;

flex-shrink: 0;

border-radius:
999px;

background:
#f0f0f0;

color:
#666666;

font-size: 6px;
font-weight: 700;
}


.job-applicant-status.submitted {
background:
rgba(37, 99, 235, 0.07);

color:
#2457b5;
}


.job-applicant-status.reviewing {
background:
rgba(204, 131, 23, 0.09);

color:
#94600e;
}


.job-applicant-status.accepted {
background:
rgba(25, 135, 84, 0.08);

color:
#176b46;
}


.job-applicant-status.rejected {
background:
rgba(201, 61, 61, 0.08);

color:
#a83434;
}


.job-applicant-message {
margin-top: 10px;

padding:
9px;

border-radius:
10px;

background:
#fafafa;

color:
#555555;

font-size: 7.3px;

line-height: 1.6;
}


.job-applicant-actions {
margin-top: 10px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 5px;
}


.job-applicant-actions button,
.job-applicant-actions a {
min-height: 29px;

padding:
0 8px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 4px;

border:
1px solid var(--pw-border);

border-radius:
999px;

background:
#ffffff;

color:
#555555;

font-size: 6.5px;
font-weight: 600;
}


.job-applicant-actions button:hover,
.job-applicant-actions a:hover {
border-color:
var(--pw-gold-border);

background:
var(--pw-gold-soft);
}


.job-applicant-actions
.accept-applicant-btn {
background:
rgba(25, 135, 84, 0.08);

color:
#176b46;

border-color:
rgba(25, 135, 84, 0.12);
}


.job-applicant-actions
.reject-applicant-btn {
background:
rgba(201, 61, 61, 0.07);

color:
#a83434;

border-color:
rgba(201, 61, 61, 0.11);
}


/* ============================================================
DELETE JOB MODAL
============================================================ */

#deleteJobModal
.modal-icon {
background:
rgba(201, 61, 61, 0.08);

color:
var(--pw-red);
}


/* ============================================================
APPLICATION CARDS
============================================================ */

.applications-list {
display: flex;
flex-direction: column;

gap: 10px;
}


.application-card {
width: 100%;

padding:
14px;

display: flex;
align-items: center;

gap: 12px;

border:
1px solid var(--pw-border);

border-radius:
14px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-xs);
}


.application-card:hover {
border-color:
rgba(212, 175, 55, 0.20);

box-shadow:
var(--pw-shadow-sm);
}


.application-icon {
width: 40px;
height: 40px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 10px;
}


.application-info {
min-width: 0;

flex: 1;
}


.application-info h3 {
overflow: hidden;

margin-bottom: 2px;

color:
var(--pw-text);

font-size: 9px;
font-weight: 650;

white-space: nowrap;
text-overflow: ellipsis;
}


.application-info p {
overflow: hidden;

color:
var(--pw-muted);

font-size: 7px;

white-space: nowrap;
text-overflow: ellipsis;
}


.application-info small {
display: block;

margin-top: 3px;

color:
var(--pw-light-muted);

font-size: 6.5px;
}


.application-status {
min-height: 27px;

padding:
0 8px;

flex-shrink: 0;

display: inline-flex;
align-items: center;

border-radius:
999px;

background:
#f1f1f1;

color:
#666666;

font-size: 6.5px;
font-weight: 700;

text-transform:
capitalize;
}


.application-status.submitted {
background:
rgba(37, 99, 235, 0.07);

color:
#2457b5;
}


.application-status.reviewing {
background:
rgba(204, 131, 23, 0.09);

color:
#95600d;
}


.application-status.accepted {
background:
rgba(25, 135, 84, 0.08);

color:
#176b46;
}


.application-status.rejected {
background:
rgba(201, 61, 61, 0.08);

color:
#a83434;
}


/* ============================================================
APPLICATION DETAILS
============================================================ */

.application-details-card {
position: relative;

width: 100%;
max-width: 560px;

padding:
23px;

border-radius:
20px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-lg);
}


.application-detail-heading {
padding-right: 35px;

display: flex;
align-items: center;

gap: 11px;
}


.application-detail-icon {
width: 44px;
height: 44px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
13px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 11px;
}


.application-detail-heading > div:last-child {
min-width: 0;
}


.application-detail-heading span {
display: block;

color:
var(--pw-muted);

font-size: 7px;
}


.application-detail-heading h3 {
margin-top: 2px;

color:
var(--pw-text);

font-size: 14px;
}


.application-detail-status {
margin-top: 17px;

padding:
11px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

border:
1px solid var(--pw-border);

border-radius:
11px;

background:
var(--pw-soft-bg);
}


.application-detail-status span {
color:
var(--pw-muted);

font-size: 7px;
}


.application-detail-status strong {
color:
var(--pw-text);

font-size: 8px;
}


.application-detail-info-grid {
margin-top: 10px;

display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

gap: 7px;
}


.application-detail-info-grid > div {
padding:
10px;

border:
1px solid var(--pw-border);

border-radius:
10px;

background:
#ffffff;
}


.application-detail-info-grid span {
display: block;

margin-bottom: 3px;

color:
var(--pw-muted);

font-size: 6.3px;
}


.application-detail-info-grid strong {
display: block;

overflow: hidden;

color:
var(--pw-text);

font-size: 7.5px;

white-space: nowrap;
text-overflow: ellipsis;
}


.application-detail-message {
margin-top: 12px;

padding:
12px;

border:
1px solid var(--pw-border);

border-radius:
11px;

background:
#fafafa;
}


.application-detail-message > span {
display: block;

margin-bottom: 6px;

color:
var(--pw-muted);

font-size: 6.8px;
font-weight: 600;
}


.application-detail-message p {
color:
#4f4f4f;

font-size: 7.8px;

line-height: 1.65;
}


.application-detail-actions {
margin-top: 16px;

display: flex;
justify-content: flex-end;
}


/* ============================================================
GENERIC TOGGLE
============================================================ */

.toggle-switch {
position: relative;

width: 42px;
height: 23px;

flex-shrink: 0;

border-radius:
999px;

background:
#d8d8d8;
}


.toggle-switch::after {
content: "";

position: absolute;

top: 3px;
left: 3px;

width: 17px;
height: 17px;

border-radius: 50%;

background:
#ffffff;

box-shadow:
0 2px 5px
rgba(0, 0, 0, 0.16);

transition:
transform var(--pw-transition);
}


.availability-toggle {
position: relative;

width: 100%;
min-height: 67px;

padding:
12px 13px;

display: flex !important;
align-items: center;
justify-content: space-between;

gap: 13px;

border:
1px solid var(--pw-border);

border-radius:
12px;

background:
#ffffff;

cursor: pointer;
}


.availability-toggle > div {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.availability-toggle strong {
color:
var(--pw-text);

font-size: 8px;
}


.availability-toggle > div > span {
color:
var(--pw-muted);

font-size: 6.8px;

line-height: 1.5;
}


.availability-toggle input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.availability-toggle
input:checked
+
.toggle-switch {
background:
var(--pw-gold);
}


.availability-toggle
input:checked
+
.toggle-switch::after {
transform:
translateX(19px);
}


/* ============================================================
RESPONSIVE JOBS / APPLICATIONS
============================================================ */

@media (max-width: 950px) {

.job-application-settings {
grid-template-columns:
1fr;
}


.application-detail-info-grid {
grid-template-columns:
1fr 1fr;
}

}


@media (max-width: 760px) {

.job-form-grid {
grid-template-columns:
1fr;
}


.job-contact-grid {
grid-template-columns:
1fr;
}


.member-job-footer {
align-items: flex-start;
flex-direction: column;
}


.member-job-actions {
width: 100%;
}


.application-card {
align-items: flex-start;
}

}


@media (max-width: 560px) {

#jobForm {
padding:
15px;
}


.job-creator-header {
padding:
15px;
}


.member-job-card {
padding:
14px;
}


.member-job-card-header {
flex-direction: column;
}


.member-job-status {
margin-left: 54px;
}


.member-job-actions {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}


.member-job-action-btn {
width: 100%;
}


.job-applicants-summary {
grid-template-columns:
1fr;
}


.application-card {
flex-wrap: wrap;
}


.application-status {
margin-left: 52px;
}


.application-detail-info-grid {
grid-template-columns:
1fr;
}


.application-detail-actions
.section-secondary-btn {
width: 100%;
}

}

/* ============================================================
NOTIFICATIONS
============================================================ */

.notification-filter-bar {
width: 100%;

margin-bottom: 16px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;
}


.notification-clear-btn {
min-height: 34px;

padding:
0 11px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

flex-shrink: 0;

border:
1px solid var(--pw-border);

border-radius:
999px;

background:
#ffffff;

color:
#666666;

font-size: 7.3px;
font-weight: 600;
}


.notification-clear-btn:hover {
border-color:
rgba(201, 61, 61, 0.16);

background:
rgba(201, 61, 61, 0.06);

color:
var(--pw-red);
}


/* ============================================================
NOTIFICATION LIST
============================================================ */

.notifications-list {
width: 100%;

display: flex;
flex-direction: column;

gap: 10px;
}


/* ============================================================
DYNAMIC NOTIFICATION CARD
============================================================ */

.notification-card {
position: relative;

width: 100%;

padding:
14px;

display: flex;
align-items: flex-start;

gap: 11px;

border:
1px solid var(--pw-border);

border-radius:
14px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-xs);
}


.notification-card:hover {
border-color:
rgba(212, 175, 55, 0.18);

box-shadow:
var(--pw-shadow-sm);
}


.notification-card.unread {
border-color:
rgba(212, 175, 55, 0.25);

background:
linear-gradient(
90deg,
rgba(212, 175, 55, 0.055),
#ffffff
);
}


.notification-card.unread::before {
content: "";

position: absolute;

top: 17px;
left: -4px;

width: 7px;
height: 7px;

border-radius: 50%;

background:
var(--pw-gold);
}


.notification-card-icon {
width: 39px;
height: 39px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 10px;
}


.notification-card-content {
min-width: 0;

flex: 1;
}


.notification-card-content h3 {
margin-bottom: 3px;

color:
var(--pw-text);

font-size: 8.7px;
font-weight: 650;
}


.notification-card-content p {
margin-bottom: 4px;

color:
#5b5b5b;

font-size: 7.6px;

line-height: 1.6;
}


.notification-card-content small {
color:
var(--pw-light-muted);

font-size: 6.5px;
}


.notification-link {
width: 30px;
height: 30px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
#f3f3f3;

color:
#555555;

font-size: 7px;
}


.notification-link:hover {
background:
var(--pw-gold-soft);

color:
var(--pw-gold-dark);
}


/* ============================================================
SETTINGS
============================================================ */

.settings-form {
width: 100%;

display: flex;
flex-direction: column;

gap: 17px;
}


.settings-card {
width: 100%;

padding:
22px;

background:
#ffffff;

border:
1px solid var(--pw-border);

border-radius:
var(--pw-radius-md);

box-shadow:
var(--pw-shadow-xs);
}


.settings-card-heading {
margin-bottom: 21px;

display: flex;
align-items: center;

gap: 11px;
}


.settings-icon {
width: 40px;
height: 40px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
12px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 11px;
}


.settings-card-heading > div:last-child {
min-width: 0;
}


.settings-card-heading h3 {
margin-bottom: 2px;

color:
var(--pw-text);

font-size: 13px;
font-weight: 650;
}


.settings-card-heading p {
color:
var(--pw-muted);

font-size: 7.8px;

line-height: 1.5;
}


/* ============================================================
PROFILE MEDIA SETTINGS
============================================================ */

.profile-media-settings {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 13px;
}


.profile-media-setting {
min-width: 0;

padding:
15px;

display: flex;
align-items: center;

gap: 13px;

border:
1px solid var(--pw-border);

border-radius:
14px;

background:
var(--pw-soft-bg);
}


.profile-media-preview {
flex-shrink: 0;

overflow: hidden;

background:
var(--pw-black-soft);
}


.avatar-preview-setting {
width: 72px;
height: 72px;

border-radius: 50%;

border:
3px solid #ffffff;

box-shadow:
0 4px 15px
rgba(0, 0, 0, 0.10);
}


.avatar-preview-setting img {
width: 100%;
height: 100%;

object-fit: cover;
}


.cover-preview-setting {
width: 115px;
height: 72px;

display: flex;
align-items: center;
justify-content: center;

border-radius:
12px;

color:
var(--pw-gold);

font-size: 17px;

background-position:
center;

background-size:
cover;
}


.cover-preview-setting.has-image i {
display: none;
}


.profile-media-info {
min-width: 0;

flex: 1;
}


.profile-media-info > strong {
display: block;

margin-bottom: 3px;

color:
var(--pw-text);

font-size: 8.7px;
}


.profile-media-info > span {
display: block;

color:
var(--pw-muted);

font-size: 6.8px;

line-height: 1.45;
}


.profile-media-actions {
margin-top: 9px;

display: flex;
align-items: center;
flex-wrap: wrap;

gap: 6px;
}


/* ============================================================
SETTINGS FORM GRID
============================================================ */

.settings-form-grid {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 16px;
}


.settings-group {
min-width: 0;
}


.settings-group.full-width {
grid-column:
1 / -1;
}


.settings-group label {
display: block;

margin-bottom: 6px;

color:
#363636;

font-size: 8.3px;
font-weight: 600;
}


.settings-group input,
.settings-group textarea,
.settings-group select {
width: 100%;

border:
1px solid #dddddd;

border-radius:
11px;

background:
#fafafa;

color:
var(--pw-text);

font-size: 8.8px;
}


.settings-group input,
.settings-group select {
height: 42px;

padding:
0 12px;
}


.settings-group textarea {
min-height: 115px;

padding:
11px 12px;

resize: vertical;

line-height: 1.65;
}


.settings-group input:focus,
.settings-group textarea:focus,
.settings-group select:focus {
border-color:
var(--pw-gold);

background:
#ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.07);
}


.settings-group input[readonly] {
background:
#f1f1f1;

color:
#777777;

cursor:
not-allowed;
}


.settings-group small {
display: block;

margin-top: 5px;

color:
var(--pw-light-muted);

font-size: 6.5px;

line-height: 1.45;
}


/* ============================================================
USERNAME INPUT
============================================================ */

.username-input-wrapper {
position: relative;
}


.username-input-wrapper > span {
position: absolute;

left: 12px;
top: 50%;

transform:
translateY(-50%);

color:
#999999;

font-size: 8px;

z-index: 2;
}


.username-input-wrapper input {
padding-left:
27px;
}


/* ============================================================
SETTINGS ICON INPUT
============================================================ */

.settings-icon-input {
position: relative;
}


.settings-icon-input > i {
position: absolute;

left: 12px;
top: 50%;

transform:
translateY(-50%);

color:
var(--pw-gold-dark);

font-size: 9px;

z-index: 2;
}


.settings-icon-input input {
padding-left:
31px;
}


/* ============================================================
TEXTAREA COUNTER
============================================================ */

.textarea-counter {
margin-top: 5px;

text-align: right;

color:
var(--pw-light-muted);

font-size: 6.5px;
}


/* ============================================================
PRIVACY SETTINGS
============================================================ */

.profile-privacy-options {
display: flex;
flex-direction: column;

gap: 8px;
}


.privacy-setting-row {
position: relative;

min-height: 67px;

padding:
12px 13px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 13px;

border:
1px solid var(--pw-border);

border-radius:
12px;

background:
var(--pw-soft-bg);

cursor: pointer;
}


.privacy-setting-row > div {
min-width: 0;

display: flex;
flex-direction: column;

gap: 2px;
}


.privacy-setting-row strong {
color:
var(--pw-text);

font-size: 8px;
}


.privacy-setting-row > div > span {
color:
var(--pw-muted);

font-size: 6.7px;

line-height: 1.45;
}


.privacy-setting-row input {
position: absolute;

opacity: 0;

pointer-events: none;
}


.privacy-setting-row
input:checked
+
.toggle-switch {
background:
var(--pw-gold);
}


.privacy-setting-row
input:checked
+
.toggle-switch::after {
transform:
translateX(19px);
}


/* ============================================================
SECURITY SETTINGS
============================================================ */

.security-settings-list {
display: flex;
flex-direction: column;

gap: 8px;
}


.security-setting-row {
min-height: 72px;

padding:
12px 13px;

display: flex;
align-items: center;

gap: 11px;

border:
1px solid var(--pw-border);

border-radius:
12px;

background:
var(--pw-soft-bg);
}


.security-setting-icon {
width: 37px;
height: 37px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 9px;
}


.security-setting-row > div:nth-child(2) {
min-width: 0;

flex: 1;
}


.security-setting-row strong {
display: block;

margin-bottom: 2px;

color:
var(--pw-text);

font-size: 8px;
}


.security-setting-row span {
color:
var(--pw-muted);

font-size: 6.7px;

line-height: 1.45;
}


/* ============================================================
SAVE AREA
============================================================ */

.settings-save-area {
display: flex;
justify-content: flex-end;
}


.save-profile-btn {
min-height: 41px;

padding:
0 15px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

border-radius:
999px;

background:
var(--pw-black-soft);

color:
#ffffff;

font-size: 8px;
font-weight: 600;
}


.save-profile-btn:hover {
transform:
translateY(-1px);

background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
PASSWORD WRAPPER
============================================================ */

.settings-password-wrapper {
position: relative;
}


.settings-password-wrapper input {
padding-right:
42px;
}


.settings-password-toggle {
position: absolute;

top: 50%;
right: 7px;

width: 31px;
height: 31px;

transform:
translateY(-50%);

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
transparent;

color:
#888888;

font-size: 8px;
}


.settings-password-toggle:hover {
background:
#f1f1f1;

color:
#222222;
}


/* ============================================================
CHANGE PASSWORD CARD
============================================================ */

.change-password-card {
max-width: 440px;
}


.change-password-card form {
margin-top: 18px;

display: flex;
flex-direction: column;

gap: 13px;

text-align: left;
}


.full-width-modal-btn {
width: 100%;

margin-top: 3px;
}


/* ============================================================
GENERIC PROFILE MODAL
============================================================ */

.profile-modal {
position: fixed;

inset: 0;

display: none;

align-items: center;
justify-content: center;

padding:
18px;

overflow-y: auto;

background:
rgba(0, 0, 0, 0.68);

backdrop-filter:
blur(6px);

-webkit-backdrop-filter:
blur(6px);

z-index: 11000;
}


.profile-modal.active {
display: flex;

animation:
pwModalFadeIn
0.2s ease;
}


@keyframes pwModalFadeIn {

from {
opacity: 0;
}

to {
opacity: 1;
}

}


/* ============================================================
MODAL CARD
============================================================ */

.profile-modal-card {
position: relative;

width: 100%;
max-width: 390px;

margin: auto;

padding:
28px;

border:
1px solid var(--pw-border);

border-radius:
20px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-lg);

text-align: center;

animation:
pwModalCardIn
0.23s ease;
}


@keyframes pwModalCardIn {

from {
opacity: 0;

transform:
translateY(8px)
scale(0.985);
}

to {
opacity: 1;

transform:
translateY(0)
scale(1);
}

}


/* ============================================================
MODAL CLOSE
============================================================ */

.modal-close-btn {
position: absolute;

top: 11px;
right: 11px;

width: 31px;
height: 31px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
#f3f3f3;

color:
#555555;

font-size: 8px;

z-index: 6;
}


.modal-close-btn:hover {
background:
#e9e9e9;

color:
#111111;
}


/* ============================================================
MODAL ICON
============================================================ */

.modal-icon {
width: 55px;
height: 55px;

margin:
0 auto 14px;

display: flex;
align-items: center;
justify-content: center;

border-radius:
17px;

background:
rgba(212, 175, 55, 0.10);

color:
var(--pw-gold-dark);

font-size: 18px;
}


.profile-modal-card h3 {
margin-bottom: 7px;

color:
var(--pw-text);

font-size: 15px;
}


.profile-modal-card > p {
color:
var(--pw-muted);

font-size: 8.5px;

line-height: 1.7;
}


/* ============================================================
MODAL ACTIONS
============================================================ */

.modal-actions {
margin-top: 19px;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 8px;
}


.modal-cancel-btn,
.modal-confirm-btn {
min-height: 39px;

padding:
0 12px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

border-radius:
999px;

font-size: 7.8px;
font-weight: 600;
}


.modal-cancel-btn {
background:
#f1f1f1;

color:
#444444;
}


.modal-cancel-btn:hover {
background:
#e8e8e8;
}


.modal-confirm-btn {
background:
var(--pw-black-soft);

color:
#ffffff;
}


.modal-confirm-btn:hover {
background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
GLOBAL SEARCH MODAL
============================================================ */

.global-search-card {
position: relative;

width: 100%;
max-width: 680px;

margin:
auto;

overflow: hidden;

border-radius:
20px;

background:
#ffffff;

box-shadow:
var(--pw-shadow-lg);
}


.global-search-header {
min-height: 72px;

padding:
15px 18px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;

border-bottom:
1px solid var(--pw-border);
}


.global-search-header > div {
min-width: 0;
}


.global-search-header span {
display: block;

color:
var(--pw-gold-dark);

font-size: 6.5px;
font-weight: 700;

letter-spacing:
1px;

text-transform:
uppercase;
}


.global-search-header h3 {
margin-top: 2px;

color:
var(--pw-text);

font-size: 15px;
}


.global-search-input-wrapper {
position: relative;

padding:
14px 17px;
}


.global-search-input-wrapper > i {
position: absolute;

left: 31px;
top: 50%;

transform:
translateY(-50%);

color:
#999999;

font-size: 9px;
}


.global-search-input-wrapper input {
width: 100%;
height: 45px;

padding:
0 14px 0 39px;

border:
1px solid var(--pw-border);

border-radius:
999px;

background:
#fafafa;

color:
var(--pw-text);

font-size: 8.5px;
}


.global-search-input-wrapper input:focus {
border-color:
var(--pw-gold);

background:
#ffffff;

box-shadow:
0 0 0 3px
rgba(212, 175, 55, 0.07);
}


/* ============================================================
SEARCH RESULTS
============================================================ */

.global-search-results {
max-height: 460px;

padding:
0 17px 17px;

overflow-y: auto;
}


.global-search-empty {
min-height: 240px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 9px;

color:
var(--pw-light-muted);

text-align: center;
}


.global-search-empty i {
color:
#d0d0d0;

font-size: 23px;
}


.global-search-empty p {
max-width: 330px;

font-size: 8px;

line-height: 1.6;
}


.global-search-result-item {
min-height: 60px;

padding:
10px 0;

display: flex;
align-items: center;

gap: 10px;

border-bottom:
1px solid var(--pw-border);
}


.global-search-result-item:last-child {
border-bottom: 0;
}


.global-search-result-icon {
width: 37px;
height: 37px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius:
11px;

background:
var(--pw-black-soft);

color:
var(--pw-gold);

font-size: 9px;
}


.global-search-result-content {
min-width: 0;

flex: 1;
}


.global-search-result-content strong {
display: block;

overflow: hidden;

color:
var(--pw-text);

font-size: 8.5px;

white-space: nowrap;
text-overflow: ellipsis;
}


.global-search-result-content span {
display: block;

margin-top: 2px;

overflow: hidden;

color:
var(--pw-muted);

font-size: 6.8px;

white-space: nowrap;
text-overflow: ellipsis;
}


.global-search-result-item > i {
flex-shrink: 0;

color:
var(--pw-light-muted);

font-size: 7px;
}


/* ============================================================
FOCUS ACCESSIBILITY
============================================================ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable="true"]:focus-visible {
outline:
2px solid
rgba(212, 175, 55, 0.50);

outline-offset:
2px;
}


/* ============================================================
TEXT SELECTION
============================================================ */

::selection {
background:
var(--pw-gold);

color:
#111111;
}


/* ============================================================
RESPONSIVE SETTINGS
============================================================ */

@media (max-width: 960px) {

.profile-media-settings {
grid-template-columns:
1fr;
}


.notification-filter-bar {
align-items: flex-start;
flex-direction: column;
}


.notification-clear-btn {
align-self: flex-end;
}

}


@media (max-width: 700px) {

.settings-form-grid {
grid-template-columns:
1fr;
}


.settings-group.full-width {
grid-column:
auto;
}


.profile-media-setting {
align-items: flex-start;
flex-direction: column;
}


.profile-media-actions {
width: 100%;
}


.security-setting-row {
align-items: flex-start;
flex-wrap: wrap;
}


.security-setting-row
.section-secondary-btn {
width: 100%;

margin-left: 48px;
}


.settings-save-area {
justify-content: stretch;
}


.save-profile-btn {
width: 100%;
}


.notification-filter-bar
.content-filter-group {
width: 100%;
}

}


@media (max-width: 520px) {

.settings-card {
padding:
17px 14px;
}


.settings-card-heading {
align-items: flex-start;
}


.profile-media-preview.cover-preview-setting {
width: 100%;
height: 125px;
}


.profile-media-preview.avatar-preview-setting {
width: 78px;
height: 78px;
}


.profile-media-actions {
display: grid;

grid-template-columns:
1fr;
}


.profile-media-actions
.section-primary-btn,
.profile-media-actions
.section-secondary-btn {
width: 100%;
}


.modal-actions {
grid-template-columns:
1fr;
}


.profile-modal-card {
padding:
25px 18px 20px;
}


.global-search-card {
border-radius:
16px;
}


.global-search-input-wrapper {
padding:
12px;
}


.global-search-input-wrapper > i {
left: 26px;
}


.global-search-results {
padding:
0 12px 12px;
}

}
/* ============================================================
RESPONSIVE DASHBOARD LAYOUT
============================================================ */

@media (max-width: 1280px) {

.profile-stats-grid {
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
}

.profile-quick-actions {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

.overview-grid {
grid-template-columns:
1fr;
}

.overview-side-column {
display: grid;

grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);

gap: 16px;
}

.content-grid,
.courses-dashboard-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

}


@media (max-width: 1050px) {

.overview-side-column {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

.post-summary-grid,
.project-summary-grid,
.course-summary-grid,
.job-summary-grid,
.application-summary-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

}


/* ============================================================
TABLET SIDEBAR MODE
============================================================ */

@media (max-width: 900px) {

.profile-sidebar {
width:
var(--pw-sidebar-width);

transform:
translateX(-102%);

box-shadow:
20px 0 55px
rgba(0, 0, 0, 0.18);

transition:
transform 0.3s ease;
}

.profile-sidebar.active {
transform:
translateX(0);
}

.profile-layout {
width: 100%;

margin-left: 0;
}

.mobile-sidebar-toggle {
display: flex;
}

.profile-topbar {
padding:
10px 17px;
}

.profile-main {
padding:
23px 18px 48px;
}

.profile-identity-area {
padding:
69px 21px 23px;

display: block;
}

.profile-main-avatar-wrapper {
left: 21px;
top: -59px;
}

.profile-main-actions {
margin-top: 17px;
}

.profile-edit-btn {
width: fit-content;
}

.profile-name-row {
max-width: 100%;
}

.profile-meta {
max-width: 100%;
}

}


/* ============================================================
TABLET CONTENT
============================================================ */

@media (max-width: 800px) {

.profile-stats-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

.overview-side-column {
grid-template-columns:
1fr;
}

.profile-content-toolbar {
align-items: stretch;

flex-direction: column;
}

.content-search-wrapper {
max-width: none;
}

.content-filter-group {
width: 100%;
}

.section-page-header {
align-items: stretch;

flex-direction: column;
}

.section-page-header
.section-primary-btn,
.section-page-header
.section-secondary-btn {
width: fit-content;
}

}


/* ============================================================
MOBILE DASHBOARD
============================================================ */

@media (max-width: 650px) {

.profile-topbar {
min-height: 64px;

padding:
9px 12px;
}

.topbar-title > span {
display: none;
}

.topbar-title h1 {
max-width: 160px;

font-size: 14px;
}

.topbar-actions {
gap: 5px;
}

.topbar-icon-btn {
width: 37px;
height: 37px;
}

.topbar-user-button {
width: 39px;
height: 39px;

padding: 4px;

justify-content: center;
}

.topbar-user-button img {
width: 29px;
height: 29px;
}

.topbar-user-button span,
.topbar-user-button > i {
display: none;
}

.mobile-sidebar-toggle {
width: 37px;
height: 37px;
}

.profile-main {
padding:
17px 12px 42px;
}

.profile-hero-card {
border-radius:
19px;
}

.profile-cover {
height: 158px;
}

.edit-cover-btn {
right: 11px;
bottom: 10px;
}

.profile-main-avatar-wrapper {
width: 101px;
height: 101px;

top: -49px;
left: 17px;
}

.profile-main-avatar {
width: 101px;
height: 101px;

border-width: 4px;
}

.avatar-edit-btn {
width: 31px;
height: 31px;

border-width: 3px;
}

.profile-identity-area {
padding:
65px 16px 20px;
}

.profile-name-row {
display: block;
}

.profile-main-info h2 {
font-size: 19px;
}

.profile-status-badge {
width: fit-content;

margin-top: 8px;
}

.profile-bio {
font-size: 9px;
}

.profile-meta {
align-items: flex-start;

flex-direction: column;

gap: 7px;
}

.profile-main-actions {
margin-top: 15px;
}

.profile-edit-btn {
width: 100%;
}

.profile-stats-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 9px;
}

.profile-stat-card {
min-height: 78px;

padding: 12px;
}

.stat-icon {
width: 35px;
height: 35px;
}

.profile-stat-card span {
font-size: 15px;
}

.profile-quick-actions {
grid-template-columns:
1fr;
}

.dashboard-card {
padding: 17px;
}

.section-page-header h2 {
font-size: 19px;
}

.section-page-header p {
font-size: 8.5px;
}

.section-page-header
.section-primary-btn,
.section-page-header
.section-secondary-btn {
width: 100%;
}

.content-grid,
.courses-dashboard-grid {
grid-template-columns:
1fr;
}

}


/* ============================================================
MOBILE PUBLICATION EDITOR
============================================================ */

@media (max-width: 650px) {

#createPostForm {
padding:
15px;
}

.post-composer-header {
padding:
13px 15px;
}

.post-type-selector {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

.post-type-option:last-child {
grid-column:
1 / -1;
}

.rich-editor-toolbar {
gap: 3px;
}

.editor-tool {
width: 29px;
height: 29px;
}

.editor-separator {
margin:
0 1px;
}

.rich-editor-content {
min-height: 145px;
}

.post-visibility-options {
grid-template-columns:
1fr;
}

.post-composer-footer {
align-items: stretch;

flex-direction: column;
}

.composer-actions {
width: 100%;

display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

.composer-cancel-btn {
grid-column:
1 / -1;
}

.composer-actions button {
width: 100%;
}

.member-post-footer {
align-items: flex-start;

flex-direction: column;
}

.member-post-actions {
width: 100%;

flex-wrap: wrap;
}

}


/* ============================================================
MOBILE SUMMARY GRIDS
============================================================ */

@media (max-width: 560px) {

.post-summary-grid,
.project-summary-grid,
.course-summary-grid,
.job-summary-grid,
.application-summary-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);

gap: 9px;
}

.post-summary-card {
min-height: 75px;

padding: 11px;
}

.post-summary-icon {
width: 35px;
height: 35px;
}

.post-summary-card strong {
font-size: 15px;
}

}


/* ============================================================
SMALL PHONE
============================================================ */

@media (max-width: 430px) {

.profile-topbar {
gap: 7px;
}

.topbar-title h1 {
max-width: 115px;

font-size: 13px;
}

.topbar-actions
.topbar-icon-btn:first-child {
display: none;
}

.profile-cover {
height: 143px;
}

.edit-cover-btn {
width: 35px;
height: 35px;

padding: 0;

font-size: 0;
}

.edit-cover-btn i {
font-size: 10px;
}

.profile-stats-grid {
grid-template-columns:
1fr;
}

.profile-stat-card {
min-height: 70px;
}

.profile-quick-action {
min-height: 69px;
}

.welcome-actions {
align-items: stretch;

flex-direction: column;
}

.welcome-actions
.primary-card-action,
.welcome-actions
.secondary-card-action {
width: 100%;
}

.post-summary-grid,
.project-summary-grid,
.course-summary-grid,
.job-summary-grid,
.application-summary-grid {
grid-template-columns:
1fr;
}

.post-type-selector {
grid-template-columns:
1fr;
}

.post-type-option:last-child {
grid-column:
auto;
}

.composer-actions {
grid-template-columns:
1fr;
}

.composer-cancel-btn {
grid-column:
auto;
}

.member-post-actions {
display: grid;

grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}

.member-post-action-btn {
width: 100%;
}

.post-interactions-panel,
.job-applicants-panel {
width: 100%;
}

}


/* ============================================================
VERY SMALL PHONE
============================================================ */

@media (max-width: 360px) {

.profile-main {
padding-left: 9px;
padding-right: 9px;
}

.profile-topbar {
padding-left: 9px;
padding-right: 9px;
}

.topbar-actions
.topbar-icon-btn:nth-child(2) {
display: none;
}

.profile-main-info h2 {
font-size: 17px;
}

.profile-main-avatar-wrapper {
left: 14px;
}

}


/* ============================================================
HOVER SAFETY FOR TOUCH DEVICES
============================================================ */

@media (hover: none) {

.profile-stat-card:hover,
.profile-quick-action:hover,
.profile-project-card:hover,
.profile-course-card:hover,
.available-course-card:hover,
.live-session-card:hover,
.saved-content-card:hover,
.member-job-card:hover,
.notification-card:hover,
.member-post-card:hover {
transform: none;
}

}


/* ============================================================
REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
scroll-behavior:
auto !important;

animation-duration:
0.01ms !important;

animation-iteration-count:
1 !important;

transition-duration:
0.01ms !important;
}

}


/* ============================================================
PRINT SAFETY
============================================================ */

@media print {

.profile-sidebar,
.profile-topbar,
.sidebar-overlay,
.profile-modal,
.project-preview-modal,
.post-interactions-panel,
.job-applicants-panel,
button {
display:
none !important;
}

.profile-layout {
width: 100%;

margin-left: 0;
}

.profile-main {
max-width: none;

padding: 0;
}

.profile-section {
display: none !important;
}

.profile-section.active {
display: block !important;
}

body {
background:
#ffffff;
}

.dashboard-card,
.profile-hero-card,
.settings-card,
.member-post-card,
.member-job-card,
.profile-project-card,
.profile-course-card {
box-shadow:
none;

break-inside:
avoid;
}

}

/* =========================================================
JOB APPLICANT DETAILS — COMPACT PROFESSIONAL STYLE
========================================================= */

.job-applicant-card {
padding: 20px;
border: 1px solid #e8e8e8;
border-radius: 18px;
background: #ffffff;
}


/* Candidate name */

.job-applicant-info strong {
display: block;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: #111111;
}


/* Username / member */

.job-applicant-info span {
display: block;
margin-top: 3px;
font-size: 11px;
line-height: 1.4;
color: #777777;
}


/* Location */

.job-applicant-info small {
display: flex;
align-items: center;
gap: 5px;
margin-top: 6px;

font-size: 10px;
font-weight: 500;
line-height: 1.4;
color: #8b8b8b;
}

.job-applicant-info small i {
font-size: 9px;
color: #c99b16;
}


/* =========================================================
EMAIL / CONTACT INFORMATION
========================================================= */

.job-applicant-detail-row {
display: flex;
align-items: center;
gap: 8px;

margin-top: 14px;
padding: 10px 12px;

border-radius: 10px;
background: #f8f8f8;

font-size: 11px;
line-height: 1.4;
color: #555555;

overflow: hidden;
}

.job-applicant-detail-row i {
flex: 0 0 auto;
font-size: 11px;
color: #b58a0a;
}

.job-applicant-detail-row span {
min-width: 0;
font-size: 11px;
overflow-wrap: anywhere;
}


/* =========================================================
PORTFOLIO / CONTACT LINKS
========================================================= */

.job-applicant-links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;

margin-top: 14px;
}

.job-applicant-links a,
.job-applicant-links span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;

min-height: 32px;
padding: 7px 11px;

border: 1px solid #e4e4e4;
border-radius: 9px;

background: #ffffff;
color: #333333;

font-size: 10px;
font-weight: 600;
line-height: 1;

text-decoration: none;
}

.job-applicant-links a:hover {
border-color: #c99b16;
color: #9d7600;
}

.job-applicant-links i {
font-size: 10px;
color: #b58a0a;
}


/* =========================================================
BIO / PRESENTATION
========================================================= */

.job-applicant-profile-summary {
margin-top: 14px;
}

.job-applicant-profile-summary small {
display: block;
margin-bottom: 5px;

font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #a17b0b;
}

.job-applicant-profile-summary p {
margin: 0;

font-size: 11px;
line-height: 1.6;
color: #555555;
}


/* =========================================================
APPLICATION MESSAGE
========================================================= */

.job-applicant-message {
margin-top: 14px;
padding: 12px 14px;

border-radius: 11px;
background: #fafafa;
}

.job-applicant-message small {
display: block;
margin-bottom: 5px;

font-size: 9px;
font-weight: 700;
color: #9d7600;
}

.job-applicant-message p {
margin: 0;

font-size: 11px;
line-height: 1.55;
color: #444444;
}


/* =========================================================
SKILLS
========================================================= */

.job-applicant-skills {
display: flex;
flex-wrap: wrap;
gap: 6px;

margin-top: 12px;
}

.job-applicant-skills span {
padding: 6px 9px;

border-radius: 999px;
background: #f5f5f5;

font-size: 9px;
font-weight: 600;
color: #555555;
}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

.job-applicant-card {
padding: 16px;
border-radius: 14px;
}

.job-applicant-detail-row {
font-size: 10px;
}

.job-applicant-detail-row span {
font-size: 10px;
}

.job-applicant-links {
align-items: stretch;
}

.job-applicant-links a,
.job-applicant-links span {
font-size: 9px;
}

}


/* ============================================================
MES CANDIDATURES — PROFESSIONAL APPLICATION CARD
============================================================ */

.application-card {
display: flex;
flex-direction: column;
gap: 16px;

width: 100%;
padding: 20px;

background: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 18px;

box-sizing: border-box;
}


/* ============================================================
CARD HEADER
============================================================ */

.application-card-header {
display: flex;
align-items: center;
gap: 12px;
}


.application-company-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 12px;
background: #111111;
color: #d4a91f;

font-size: 14px;
}


.application-card-title {
min-width: 0;
flex: 1;
}


.application-card-title > span {
display: block;

margin-bottom: 3px;

font-size: 10px;
font-weight: 600;
color: #888888;
}


.application-card-title h3 {
margin: 0;

font-size: 16px;
font-weight: 700;
line-height: 1.3;

color: #111111;
}


/* ============================================================
STATUS
============================================================ */

.application-status {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;

flex: 0 0 auto;

padding: 6px 9px;

border-radius: 999px;

font-size: 9px;
font-weight: 700;
line-height: 1;

white-space: nowrap;
}


.application-status.submitted {
background: #eef3ff;
color: #315ec9;
}


.application-status.reviewing {
background: #fff7dd;
color: #9b7300;
}


.application-status.accepted {
background: #eaf8ef;
color: #20804a;
}


.application-status.rejected {
background: #fff0f0;
color: #c44040;
}


.application-status.withdrawn {
background: #f1f1f1;
color: #777777;
}


/* ============================================================
JOB INFORMATION
============================================================ */

.application-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 7px 14px;
}


.application-card-meta span {
display: inline-flex;
align-items: center;
gap: 5px;

font-size: 10px;
font-weight: 500;
line-height: 1.4;

color: #777777;
}


.application-card-meta span i {
font-size: 9px;
color: #b68b0a;
}


/* ============================================================
APPLICATION MESSAGE
============================================================ */

.application-card-message {
padding: 12px 14px;

background: #f8f8f8;
border-radius: 11px;
}


.application-card-message small {
display: block;

margin-bottom: 5px;

font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;

color: #9d7600;
}


.application-card-message p {
margin: 0;

font-size: 11px;
font-weight: 400;
line-height: 1.55;

color: #555555;

overflow-wrap: anywhere;
}


/* ============================================================
ACTIONS
============================================================ */

.application-card-footer {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;

gap: 8px;

padding-top: 13px;

border-top: 1px solid #eeeeee;
}


.application-view-job-btn,
.application-withdraw-btn {
min-height: 34px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

padding: 8px 13px;

border-radius: 9px;

font-family: inherit;
font-size: 10px;
font-weight: 600;

cursor: pointer;

transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}


/* VIEW JOB */

.application-view-job-btn {
border: 1px solid #111111;
background: #111111;
color: #ffffff;
}


.application-view-job-btn i {
font-size: 9px;
color: #d5ad28;
}


.application-view-job-btn:hover {
transform: translateY(-1px);
background: #252525;
}


/* WITHDRAW */

.application-withdraw-btn {
border: 1px solid #e4e4e4;
background: #ffffff;
color: #666666;
}


.application-withdraw-btn:hover {
border-color: #d4a91f;
color: #8f6b00;
background: #fffdf6;
}


/* ============================================================
MOBILE
============================================================ */

@media (max-width: 700px) {

.application-card {
padding: 16px;
gap: 13px;
border-radius: 14px;
}


.application-card-header {
align-items: flex-start;
flex-wrap: wrap;
}


.application-company-icon {
width: 38px;
height: 38px;
flex-basis: 38px;
}


.application-card-title h3 {
font-size: 14px;
}


.application-status {
margin-left: 50px;
}


.application-card-meta {
flex-direction: column;
align-items: flex-start;
gap: 7px;
}


.application-card-footer {
align-items: stretch;
flex-direction: column;
}


.application-view-job-btn,
.application-withdraw-btn {
width: 100%;
}

}

.profile-code-editor textarea,
#postCodeHtml,
#postCodeCss,
#postCodeJavascript {
width: 100%;
min-height: 180px;

padding: 16px;

font-family: "Consolas", "Monaco", "Courier New", monospace;
font-size: 13px;
line-height: 1.65;

color: #e8e8e8;
background: #151515;

border: 1px solid #303030;
border-radius: 12px;

resize: vertical;
tab-size: 4;
outline: none;
}

.profile-code-editor textarea:focus,
#postCodeHtml:focus,
#postCodeCss:focus,
#postCodeJavascript:focus {
border-color: #b58b18;
}


/* ============================================================
PURCHASES SECTION
============================================================ */

#purchases {
width: 100%;
}


/* ============================================================
PURCHASE SUMMARY
============================================================ */

.purchase-summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));

gap: 16px;

margin: 24px 0;
}


.purchase-summary-card {
display: flex;
align-items: center;

gap: 14px;

padding: 18px;

background: #ffffff;

border: 1px solid #e8e8e8;
border-radius: 16px;

box-shadow:
0 8px 24px rgba(0, 0, 0, 0.035);
}


.purchase-summary-icon {
width: 44px;
height: 44px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 12px;

background: #f7f2df;
color: #a98500;

font-size: 16px;
}


.purchase-summary-card > div:last-child {
display: flex;
flex-direction: column;

gap: 2px;
}


.purchase-summary-card strong {
font-size: 20px;
line-height: 1;

color: #111111;
}


.purchase-summary-card span {
font-size: 11px;

color: #777777;
}


/* ============================================================
PURCHASE FILTERS
============================================================ */

#purchases .profile-content-toolbar {
margin-bottom: 20px;
}


#purchases .content-filter-group {
display: flex;
align-items: center;

gap: 8px;

flex-wrap: wrap;
}


#purchases .content-filter-btn {
min-height: 36px;

padding: 0 14px;

border: 1px solid #e1e1e1;
border-radius: 999px;

background: #ffffff;
color: #555555;

font-size: 10px;
font-weight: 700;

cursor: pointer;

transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}


#purchases .content-filter-btn:hover {
transform: translateY(-1px);

border-color: #b99a31;
}


#purchases .content-filter-btn.active {
border-color: #111111;

background: #111111;
color: #ffffff;
}


/* ============================================================
PURCHASE GRID
============================================================ */

.profile-purchases-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(320px, 1fr)
);

gap: 18px;
}


/* ============================================================
PURCHASE CARD
============================================================ */

.profile-purchase-card {
display: flex;
flex-direction: column;

gap: 16px;

padding: 20px;

background: #ffffff;

border: 1px solid #e8e8e8;
border-radius: 18px;

box-shadow:
0 12px 35px rgba(0, 0, 0, 0.045);

transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}


.profile-purchase-card:hover {
transform: translateY(-2px);

border-color: #ddd5b8;

box-shadow:
0 16px 38px rgba(0, 0, 0, 0.07);
}


/* ============================================================
CARD TOP
============================================================ */

.profile-purchase-card-top {
display: flex;
align-items: center;
justify-content: space-between;

gap: 12px;
}


.profile-purchase-type {
display: inline-flex;
align-items: center;

gap: 7px;

font-size: 10px;
font-weight: 700;

color: #555555;
}


.profile-purchase-type i {
color: #a98500;
}


/* ============================================================
STATUS
============================================================ */

.profile-purchase-status {
display: inline-flex;
align-items: center;
justify-content: center;

width: fit-content;

padding: 6px 9px;

border-radius: 999px;

font-size: 9px;
font-weight: 800;

text-transform: uppercase;
}


.profile-purchase-status.pending,
.profile-purchase-status.submitted {
background: #fff7dc;
color: #8a6800;
}


.profile-purchase-status.approved {
background: #e9f8ef;
color: #27834a;
}


.profile-purchase-status.rejected {
background: #fff0f0;
color: #b43b3b;
}


.profile-purchase-status.cancelled {
background: #f2f2f2;
color: #777777;
}


/* ============================================================
PURCHASE CONTENT
============================================================ */

.profile-purchase-content {
display: flex;
flex-direction: column;

gap: 7px;
}


.profile-purchase-category {
font-size: 9px;
font-weight: 800;

letter-spacing: 0.08em;

text-transform: uppercase;

color: #a98500;
}


.profile-purchase-content h3 {
margin: 0;

font-size: 20px;
line-height: 1.25;

color: #111111;
}


.profile-purchase-content p {
margin: 0;

font-size: 12px;
line-height: 1.6;

color: #777777;
}


/* ============================================================
INFORMATION
============================================================ */

.profile-purchase-information {
display: grid;
grid-template-columns: repeat(2, 1fr);

gap: 10px;
}


.profile-purchase-information > div {
display: flex;
flex-direction: column;

gap: 4px;

padding: 13px;

background: #f8f8f8;

border: 1px solid #eeeeee;
border-radius: 12px;
}


.profile-purchase-information span {
font-size: 9px;
font-weight: 700;

text-transform: uppercase;

color: #999999;
}


.profile-purchase-information strong {
font-size: 12px;

color: #111111;
}


/* ============================================================
USER NOTE
============================================================ */

.profile-purchase-note {
padding: 14px;

border: 1px solid #ebe3c8;
border-radius: 12px;

background: #faf8f1;
}


.profile-purchase-note > span {
display: block;

margin-bottom: 5px;

font-size: 9px;
font-weight: 800;

letter-spacing: 0.07em;

text-transform: uppercase;

color: #967400;
}


.profile-purchase-note p {
margin: 0;

font-size: 11px;
line-height: 1.6;

color: #555555;
}


/* ============================================================
PURCHASE FOOTER
============================================================ */

.profile-purchase-footer {
margin-top: auto;

padding-top: 14px;

border-top: 1px solid #eeeeee;
}


.purchase-progress-message {
display: flex;
align-items: center;

gap: 8px;

padding: 11px 12px;

border-radius: 11px;

background: #fff8df;
color: #806300;

font-size: 10px;
font-weight: 600;
}


.purchase-progress-message i {
flex-shrink: 0;
}


.purchase-progress-message.approved {
background: #eaf8ef;
color: #277f48;
}


.purchase-progress-message.rejected {
background: #fff0f0;
color: #b23f3f;
}


/* ============================================================
LOADING
============================================================ */

.profile-purchase-loading {
min-height: 160px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 10px;

grid-column: 1 / -1;

color: #999999;

font-size: 11px;
}


.profile-purchase-loading i {
font-size: 18px;

color: #a98500;
}


/* ============================================================
MOBILE
============================================================ */

@media (max-width: 768px) {

.purchase-summary-grid {
grid-template-columns: 1fr;

gap: 10px;
}


.purchase-summary-card {
padding: 14px;
}


.profile-purchases-grid {
grid-template-columns: 1fr;

gap: 14px;
}


.profile-purchase-card {
padding: 16px;

border-radius: 15px;
}


.profile-purchase-information {
grid-template-columns: 1fr;
}


.profile-purchase-content h3 {
font-size: 18px;
}

}

/* ============================================================
DELIVERED WEBSITE
============================================================ */

.profile-purchase-delivery {
display: flex;
flex-direction: column;
gap: 14px;
}


.profile-purchase-delivered {
display: flex;
flex-direction: column;
gap: 16px;

padding: 17px;

background: #f7fbf8;

border: 1px solid #d8ebdf;
border-radius: 14px;
}


.profile-purchase-delivered-header {
display: flex;
align-items: center;

gap: 11px;
}


.profile-purchase-delivered-icon {
width: 40px;
height: 40px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 11px;

background: #e5f5eb;
color: #27834a;
}


.profile-purchase-delivered-header > div:last-child {
display: flex;
flex-direction: column;

gap: 2px;
}


.profile-purchase-delivered-header span {
color: #888888;

font-size: 9px;
font-weight: 700;

text-transform: uppercase;
}


.profile-purchase-delivered-header strong {
color: #1f7b45;

font-size: 15px;
}


/* NOTE */

.profile-purchase-delivery-note {
padding: 13px;

background: #ffffff;

border: 1px solid #e4ebe6;
border-radius: 11px;
}


.profile-purchase-delivery-note span {
display: block;

margin-bottom: 5px;

color: #999999;

font-size: 9px;
font-weight: 800;

text-transform: uppercase;
}


.profile-purchase-delivery-note p {
margin: 0;

color: #555555;

font-size: 11px;
line-height: 1.6;
}


/* SITE BUTTON */

.profile-purchase-site-btn {
min-height: 43px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

padding: 0 16px;

border-radius: 11px;

background: #111111;
color: #ffffff;

font-size: 11px;
font-weight: 750;

text-decoration: none;

transition:
transform 0.2s ease,
opacity 0.2s ease;
}


.profile-purchase-site-btn:hover {
transform: translateY(-1px);

opacity: 0.92;
}


/* DETAILS */

.profile-purchase-delivery-details {
display: grid;
grid-template-columns: repeat(
3,
minmax(0, 1fr)
);

gap: 8px;
}


.profile-purchase-delivery-details > div {
display: flex;
flex-direction: column;

gap: 4px;

padding: 11px;

background: #ffffff;

border: 1px solid #e5ebe7;
border-radius: 10px;
}


.profile-purchase-delivery-details span {
color: #999999;

font-size: 8px;
font-weight: 750;

text-transform: uppercase;
}


.profile-purchase-delivery-details strong {
color: #222222;

font-size: 10px;

overflow-wrap: anywhere;
}


/* MAINTENANCE */

.profile-purchase-maintenance {
display: flex;
align-items: flex-start;

gap: 10px;

padding: 12px;

background: #fbf8ec;

border: 1px solid #e9dfb9;
border-radius: 11px;

color: #8c6d00;
}


.profile-purchase-maintenance > i {
margin-top: 2px;
}


.profile-purchase-maintenance > div {
display: flex;
flex-direction: column;

gap: 2px;
}


.profile-purchase-maintenance strong {
font-size: 10px;
}


.profile-purchase-maintenance span {
color: #736a4a;

font-size: 9px;
line-height: 1.45;
}


@media (max-width: 700px) {

.profile-purchase-delivery-details {
grid-template-columns: 1fr;
}

}


/* =========================================================
   COURSE CLASSROOM
========================================================= */

.course-classroom-modal {
    padding: 20px;
}


.course-classroom-card {
    width: min(1180px, 100%);
    max-height: calc(100dvh - 40px);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #fff;

    border-radius: 22px;
}


.course-classroom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 24px;

    border-bottom: 1px solid #e8e8e8;
}


.course-classroom-header span {
    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.1em;

    color: #b28c16;
}


.course-classroom-header h2 {
    margin: 4px 0 0;

    font-size: 20px;
}


.course-classroom-layout {
    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    flex: 1;
}


.course-classroom-player-area {
    min-width: 0;

    overflow-y: auto;

    padding: 22px;

    background: #f5f5f5;
}


.course-classroom-player {
    width: 100%;
}


#courseClassroomPlayer {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    max-height: 650px;

    object-fit: contain;

    border-radius: 15px;

    background: #000;
}


.course-classroom-current {
    margin-top: 18px;
}


.course-classroom-current span {
    color: #b28c16;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}


.course-classroom-current h3 {
    margin: 6px 0;

    font-size: 21px;
}


.course-classroom-current p {
    margin: 0;

    color: #777;

    font-size: 12px;
    line-height: 1.7;
}


.course-classroom-lessons {
    min-height: 0;

    display: flex;
    flex-direction: column;

    border-left: 1px solid #e5e5e5;

    background: #fff;
}


.course-classroom-lessons-header {
    display: flex;
    justify-content: space-between;

    padding: 18px;

    border-bottom: 1px solid #eee;
}


.course-classroom-lessons-list {
    overflow-y: auto;

    padding: 10px;
}


.course-classroom-lesson {
    width: 100%;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;

    padding: 11px;

    border: 0;
    border-radius: 11px;

    background: transparent;

    text-align: left;

    cursor: pointer;
}


.course-classroom-lesson:hover {
    background: #f6f6f6;
}


.course-classroom-lesson.active {
    background: #111;

    color: #fff;
}


.course-classroom-lesson-number {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #eee;

    color: #111;

    font-size: 11px;
    font-weight: 800;
}


.course-classroom-lesson-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.course-classroom-lesson-info strong {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
}


.course-classroom-lesson-info small {
    font-size: 9px;

    opacity: 0.65;
}


@media (max-width: 800px) {

    .course-classroom-modal {
        padding: 8px;
    }


    .course-classroom-card {
        max-height: calc(100dvh - 16px);

        border-radius: 16px;
    }


    .course-classroom-layout {
        display: flex;
        flex-direction: column;

        overflow-y: auto;
    }


    .course-classroom-player-area {
        overflow: visible;

        padding: 12px;
    }


    .course-classroom-lessons {
        border-left: 0;
        border-top: 1px solid #e5e5e5;

        min-height: 240px;
    }


    .course-classroom-lessons-list {
        max-height: 320px;
    }

}


/* ============================================================
   COURSE CLASSROOM - MODULES & LESSONS
============================================================ */

.course-classroom-module {
    margin: 0 12px 22px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 16px;
}


/* ============================================================
   MODULE HEADER
============================================================ */

.course-classroom-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}


.course-classroom-module-header > div {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}


.course-classroom-module-header span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9a7400;
}


.course-classroom-module-header strong {
    font-size: 16px;
    font-weight: 800;
    color: #111111;
}


.course-module-progress {
    min-width: 42px;
    padding: 6px 9px;
    background: #f5f5f5;
    border-radius: 20px;
    text-align: center;
    font-size: 11px !important;
    color: #555 !important;
}


/* ============================================================
   MODULE DESCRIPTION
============================================================ */

.course-classroom-module-description {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
}


/* ============================================================
   LESSON LIST
============================================================ */

.course-classroom-module-lessons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* ============================================================
   LESSON
============================================================ */

.course-classroom-lesson {
    width: 100%;
    min-height: 58px;
    padding: 9px 12px;

    display: flex;
    align-items: center;
    gap: 11px;

    border: 1px solid #eeeeee;
    border-radius: 13px;
    background: #fafafa;

    text-align: left;
    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.course-classroom-lesson:hover {
    transform: translateY(-1px);
    background: #f5f5f5;
}


/* ACTIVE LESSON */

.course-classroom-lesson.active {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}


/* ============================================================
   LESSON NUMBER
============================================================ */

.course-classroom-lesson-number {
    width: 34px;
    height: 34px;
    min-width: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: #eeeeee;

    font-size: 12px;
    font-weight: 800;
    color: #111111;
}


.course-classroom-lesson.active
.course-classroom-lesson-number {
    background: #ffffff;
    color: #111111;
}


/* ============================================================
   LESSON INFORMATION
============================================================ */

.course-classroom-lesson-info {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}


.course-classroom-lesson-info strong {
    display: block;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.course-classroom-lesson-info small {
    display: flex;
    align-items: center;
    gap: 4px;

    font-size: 10px;
    color: #888888;
}


.course-classroom-lesson.active
.course-classroom-lesson-info small {
    color: #bdbdbd;
}


/* PLAY / CHECK / LOCK ICON */

.course-classroom-lesson > i:last-child {
    flex-shrink: 0;
    font-size: 15px;
}


/* ============================================================
   COMPLETED LESSON
============================================================ */

.course-classroom-lesson.completed:not(.active) {
    background: #f7fbf8;
}


/* ============================================================
   LOCKED LESSON
============================================================ */

.course-classroom-lesson.locked {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .course-classroom-module {
        margin: 0 8px 18px;
        padding: 12px;
        border-radius: 14px;
    }


    .course-classroom-module-header {
        align-items: flex-start;
    }


    .course-classroom-module-header > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }


    .course-classroom-module-header strong {
        font-size: 15px;
    }


    .course-classroom-lesson {
        min-height: 56px;
        padding: 8px 10px;
    }


    .course-classroom-lesson-number {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }


    .course-classroom-lesson-info strong {
        font-size: 12px;
    }

}




/* ============================================================
   DYNAMIC COURSE PAYMENT METHODS
============================================================ */

.course-payment-methods-grid,
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}


/* ============================================================
   PAYMENT METHOD CARD
============================================================ */

.course-payment-method-card,
.payment-method-option {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 76px;
    padding: 14px 16px;

    border: 1px solid #e5e5e5;
    border-radius: 16px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.course-payment-method-card:hover,
.payment-method-option:hover {
    transform: translateY(-1px);
    border-color: #d8b32c;
}


/* HIDE DEFAULT RADIO */

.course-payment-method-card input,
.payment-method-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* ACTIVE / SELECTED */

.course-payment-method-card.active,
.course-payment-method-card:has(input:checked),
.payment-method-option:has(input:checked) {
    border-color: #d8a900;
    background: #fffaf0;
}


/* ============================================================
   PAYMENT ICON
============================================================ */

.course-payment-method-icon,
.payment-method-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #111111;
    color: #e0b51f;

    font-size: 18px;
}


/* ============================================================
   PAYMENT INFO
============================================================ */

.course-payment-method-info,
.payment-method-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}


.course-payment-method-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}


.course-payment-method-info strong,
.payment-method-content strong {
    font-size: 13px;
    font-weight: 700;
    color: #111111;
}


.course-payment-method-info small,
.payment-method-content small {
    font-size: 10px;
    color: #8b8b8b;
}


/* ============================================================
   DYNAMIC PAYMENT DETAILS
============================================================ */

.course-payment-dynamic-details {
    margin-top: 16px;
}


.course-payment-dynamic-details:empty {
    display: none;
}


.course-payment-instruction {
    padding: 18px;

    border: 1px solid #ead69a;
    border-radius: 17px;

    background: #fffaf0;
}


/* ============================================================
   DETAILS HEADER
============================================================ */

.course-payment-instruction-header {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}


.course-payment-instruction-header > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.course-payment-instruction-header strong {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
}


.course-payment-instruction-header small {
    font-size: 11px;
    color: #777777;
}


/* ============================================================
   ACCOUNT DETAIL ROW
============================================================ */

.course-payment-detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;

    background: #ffffff;

    border: 1px solid #e8e8e8;
    border-radius: 13px;

    margin-top: 9px;
}


.course-payment-detail-row > span {
    font-size: 11px;
    color: #7b7b7b;
}


.course-payment-detail-row > strong {
    font-size: 13px;
    font-weight: 700;
    color: #111111;
}


/* ============================================================
   COPY BUTTON
============================================================ */

.course-payment-copy-btn {
    border: 0;
    outline: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 36px;
    padding: 0 12px;

    border-radius: 10px;

    background: #f3f3f3;
    color: #333333;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


.course-payment-copy-btn:hover {
    background: #e9e9e9;
}


/* ============================================================
   ONLINE / PAYPAL BUTTON
============================================================ */

.course-payment-online-btn {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 10px 16px;

    border-radius: 13px;

    background: #111111;
    color: #ffffff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
}


.course-payment-online-btn:hover {
    opacity: 0.92;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 800px) {

    .course-payment-methods-grid,
    .payment-method-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }


    .course-payment-method-card,
    .payment-method-option {
        min-height: 68px;
        padding: 12px 14px;
    }


    .course-payment-method-icon,
    .payment-method-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;

        font-size: 16px;
    }


    .course-payment-detail-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }


    .course-payment-copy-btn {
        width: 100%;
        margin-top: 5px;
    }

}



/* ============================================================
   MEMBER REVIEW MODAL
============================================================ */

.profile-review-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.profile-review-modal.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}


/* ============================================================
   OVERLAY
============================================================ */

.profile-review-overlay {
    position: absolute;
    inset: 0;

    background: rgba(10, 15, 25, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* ============================================================
   CARD
============================================================ */

.profile-review-card {
    position: relative;
    z-index: 2;

    width: min(560px, 100%);
    max-height: calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22);

    overflow: hidden;

    transform: translateY(18px) scale(0.98);

    transition:
        transform 0.25s ease;
}


.profile-review-modal.active
.profile-review-card {
    transform: translateY(0) scale(1);
}


/* ============================================================
   HEADER
============================================================ */

.profile-review-header {
    flex-shrink: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 24px;

    border-bottom: 1px solid #eeeeee;
}


.profile-review-eyebrow {
    display: block;

    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #777777;
}


.profile-review-header h2 {
    margin: 0;

    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;

    color: #171717;
}


.profile-review-close {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e7e7e7;
    border-radius: 50%;

    background: #ffffff;
    color: #555555;

    font-size: 15px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.profile-review-close:hover {
    background: #f4f4f4;
    color: #111111;

    transform: rotate(5deg);
}


/* ============================================================
   BODY
============================================================ */

.profile-review-body {
    flex: 1;
    min-height: 0;

    padding: 22px 24px;

    overflow-y: auto;
    overflow-x: hidden;
}


.profile-review-body::-webkit-scrollbar {
    width: 6px;
}


.profile-review-body::-webkit-scrollbar-track {
    background: transparent;
}


.profile-review-body::-webkit-scrollbar-thumb {
    background: #d5d5d5;

    border-radius: 20px;
}


/* ============================================================
   REVIEW CONTEXT
============================================================ */

.profile-review-context {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px;

    margin-bottom: 20px;

    border: 1px solid #ececec;
    border-radius: 14px;

    background: #fafafa;
}


.profile-review-context-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #111111;
    color: #ffffff;

    font-size: 17px;
}


.profile-review-context > div:last-child {
    min-width: 0;
}


.profile-review-context span {
    display: block;

    margin-bottom: 3px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #888888;
}


.profile-review-context strong {
    display: block;

    font-size: 14px;
    font-weight: 750;
    line-height: 1.4;

    color: #1c1c1c;
}


/* ============================================================
   ADMIN QUESTION
============================================================ */

.profile-review-question {
    margin-bottom: 22px;

    padding: 15px 16px;

    border-left: 3px solid #111111;
    border-radius: 0 12px 12px 0;

    background: #f7f7f7;
}


.profile-review-question.hidden {
    display: none;
}


.profile-review-question span {
    display: block;

    margin-bottom: 5px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;

    text-transform: uppercase;

    color: #777777;
}


.profile-review-question p {
    margin: 0;

    font-size: 13px;
    line-height: 1.6;

    color: #333333;
}


/* ============================================================
   RATING
============================================================ */

.profile-review-rating-section {
    margin-bottom: 22px;
}


.profile-review-rating-section > label {
    display: block;

    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 750;

    color: #333333;
}


.profile-review-stars {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;
}


.profile-review-stars button {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #e4e4e4;
    border-radius: 10px;

    background: #ffffff;

    font-size: 19px;

    color: #b7b7b7;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}


.profile-review-stars button:hover {
    transform: translateY(-2px);

    border-color: #bbbbbb;

    background: #fafafa;
}


.profile-review-stars button.selected {
    color: #f5b301;

    border-color: #f1d783;

    background: #fffaf0;
}


.profile-review-rating-section small {
    font-size: 11px;

    color: #777777;
}


/* ============================================================
   REVIEW TEXT
============================================================ */

.profile-review-field {
    margin-bottom: 18px;
}


.profile-review-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 750;

    color: #333333;
}


.profile-review-field textarea {
    width: 100%;
    min-height: 125px;

    padding: 13px 14px;

    box-sizing: border-box;

    border: 1px solid #dddddd;
    border-radius: 12px;

    outline: none;

    resize: vertical;

    background: #ffffff;
    color: #222222;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.profile-review-field textarea:focus {
    border-color: #999999;

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.05);
}


.profile-review-field textarea::placeholder {
    color: #aaaaaa;
}


/* ============================================================
   CHARACTER COUNTER
============================================================ */

.profile-review-counter {
    display: flex;
    justify-content: flex-end;

    margin-top: 6px;

    font-size: 10px;

    color: #999999;
}


/* ============================================================
   PUBLIC NAME PREVIEW
============================================================ */

.profile-review-name-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 18px;

    padding: 12px 14px;

    border: 1px solid #eeeeee;
    border-radius: 11px;

    background: #fafafa;
}


.profile-review-name-preview span {
    font-size: 11px;

    color: #777777;
}


.profile-review-name-preview strong {
    font-size: 12px;
    font-weight: 800;

    color: #222222;

    text-align: right;
}


/* ============================================================
   MESSAGE
============================================================ */

.profile-review-message {
    display: none;

    margin-top: 14px;

    padding: 11px 13px;

    border-radius: 10px;

    font-size: 12px;
    line-height: 1.5;
}


.profile-review-message.error {
    display: block;

    background: #fff2f2;
    color: #a92727;

    border: 1px solid #f1cccc;
}


.profile-review-message.success {
    display: block;

    background: #effaf3;
    color: #24733d;

    border: 1px solid #cbe8d4;
}


/* ============================================================
   FOOTER
============================================================ */

.profile-review-footer {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    padding: 16px 24px;

    border-top: 1px solid #eeeeee;

    background: #ffffff;
}


.profile-review-later-btn,
.profile-review-submit-btn {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px 17px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 750;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease;
}


.profile-review-later-btn {
    border: 1px solid #dddddd;

    background: #ffffff;
    color: #555555;
}


.profile-review-later-btn:hover {
    background: #f5f5f5;
}


.profile-review-submit-btn {
    border: 1px solid #111111;

    background: #111111;
    color: #ffffff;
}


.profile-review-submit-btn:hover {
    background: #292929;

    transform: translateY(-1px);
}


.profile-review-submit-btn:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .profile-review-modal {
        align-items: flex-end;

        padding: 0;
    }


    .profile-review-card {
        width: 100%;
        max-height: 92vh;

        border-radius: 22px 22px 0 0;

        transform: translateY(30px);
    }


    .profile-review-modal.active
    .profile-review-card {
        transform: translateY(0);
    }


    .profile-review-header {
        padding: 18px;
    }


    .profile-review-header h2 {
        font-size: 18px;
    }


    .profile-review-body {
        padding: 18px;
    }


    .profile-review-stars {
        justify-content: space-between;
    }


    .profile-review-stars button {
        width: 44px;
        height: 44px;
    }


    .profile-review-name-preview {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }


    .profile-review-name-preview strong {
        text-align: left;
    }


    .profile-review-footer {
        padding: 14px 18px;

        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .profile-review-later-btn,
    .profile-review-submit-btn {
        width: 100%;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

    .profile-review-stars {
        gap: 4px;
    }


    .profile-review-stars button {
        width: 39px;
        height: 39px;

        font-size: 17px;
    }


    .profile-review-footer {
        grid-template-columns: 1fr;
    }

}

/* ============================================================
   MOBILE SIDEBAR — VERTICAL SCROLL
============================================================ */

@media (max-width: 768px) {

    .profile-sidebar {
        height: 100dvh;
        max-height: 100dvh;

        overflow-y: auto;
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }


    /* Make sure bottom buttons remain reachable */

    .sidebar-bottom {
        flex-shrink: 0;

        padding-bottom: calc(
            20px + env(safe-area-inset-bottom)
        );
    }




    .logout-btn {
        margin-bottom: 8px;
    }

}