:root {
    --liquid-ink: #0b4637;
    --liquid-deep: #06382c;
    --liquid-green: #20a466;
    --liquid-bright: #62d792;
    --liquid-mint: #a9d9b8;
    --liquid-pale: #e8f6ec;
    --liquid-glass: rgba(190, 226, 202, .58);
    --liquid-glass-light: rgba(242, 252, 246, .68);
    --liquid-glass-dark: rgba(5, 61, 46, .74);
    --liquid-line: rgba(57, 178, 105, .62);
    --liquid-highlight: rgba(255, 255, 255, .58);
    --liquid-shadow: 0 22px 65px rgba(4, 55, 40, .2), inset 0 1px 0 rgba(255, 255, 255, .55);
    --liquid-shadow-soft: 0 14px 38px rgba(4, 55, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .5);
    --liquid-radius: 24px;
}

/* Shared surface: every regular page keeps its layout, but speaks one visual language. */
body.designer-shell {
    color: var(--liquid-ink);
    background-color: #83bba0;
    background-image:
        radial-gradient(circle at 15% 2%, rgba(197, 244, 211, .64), transparent 34%),
        linear-gradient(145deg, rgba(175, 222, 191, .38), rgba(4, 64, 47, .38)),
        url("../img/designer/fon_web.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
body.designer-shell::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background: linear-gradient(115deg, rgba(224, 247, 231, .18), transparent 42%, rgba(4, 65, 48, .12));
    content: "";
    pointer-events: none;
}
body.designer-shell h1,
body.designer-shell h2,
body.designer-shell h3 { font-family: Georgia, "Times New Roman", serif; }

.designer-shell .site-header {
    top: 12px;
    width: min(96%, 1500px);
    min-height: 72px;
    margin-top: 12px;
    border: 1px solid rgba(43, 171, 96, .72);
    border-radius: 22px;
    background: linear-gradient(120deg, rgba(211, 239, 220, .68), rgba(125, 190, 149, .54));
    box-shadow: var(--liquid-shadow-soft);
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
}
.designer-shell .site-header::after {
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 17px;
    content: "";
    pointer-events: none;
}
.designer-shell .brand,
.designer-shell .main-nav a:not(.button),
.designer-shell .link-button {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(45, 177, 101, .72);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(8, 78, 59, .9), rgba(44, 126, 102, .66));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 7px 20px rgba(4, 52, 38, .14);
    color: #dff5e6;
    transition: border-color .2s, transform .2s, background .2s;
}
.designer-shell .brand:hover,
.designer-shell .main-nav a:not(.button):hover,
.designer-shell .link-button:hover {
    border-color: #70dda0;
    background: linear-gradient(135deg, #0a6147, #398f70);
    color: white;
    transform: translateY(-1px);
}
.designer-shell .brand { border-radius: 13px; }

.designer-shell .button,
.designer-shell button.button {
    border: 1px solid rgba(88, 221, 143, .9);
    border-radius: 14px;
    background: linear-gradient(135deg, #07543f, #279461);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 28px rgba(5, 73, 51, .23);
    color: #effff4;
}
.designer-shell .button:hover { background: linear-gradient(135deg, #064332, #1c7d53); }

.designer-shell .messages { position: relative; z-index: 15; }
.designer-shell .message {
    border: 1px solid var(--liquid-line);
    border-radius: 14px;
    background: rgba(233, 249, 238, .78);
    box-shadow: var(--liquid-shadow-soft);
    color: var(--liquid-deep);
    backdrop-filter: blur(20px);
}
.designer-shell .site-footer {
    border-top: 1px solid rgba(88, 208, 136, .46);
    background: rgba(4, 55, 42, .84);
    box-shadow: 0 -12px 40px rgba(4, 55, 40, .13);
    color: #cdebd7;
    backdrop-filter: blur(18px);
}

/* Search, authentication and old generic panels. */
.designer-shell .page-header,
.designer-shell .auth-card,
.designer-shell .dashboard-list article,
.designer-shell .empty-state {
    border: 1px solid var(--liquid-line);
    border-radius: var(--liquid-radius);
    background: linear-gradient(135deg, rgba(216, 240, 223, .7), rgba(146, 205, 166, .48));
    box-shadow: var(--liquid-shadow);
    backdrop-filter: blur(25px) saturate(130%);
    -webkit-backdrop-filter: blur(25px) saturate(130%);
}
.designer-shell .page-header { margin-top: 46px; }
.designer-shell .page-header h1,
.designer-shell .auth-card h1 { color: var(--liquid-deep); text-shadow: 0 2px 20px rgba(255,255,255,.3); }
.designer-shell .eyebrow { color: #086146; }
.designer-shell .catalog-filters,
.designer-role-switch {
    border: 1px solid rgba(87, 218, 139, .72);
    background: rgba(5, 66, 49, .62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
    backdrop-filter: blur(16px);
}
.designer-shell input:not([type="checkbox"]):not([type="radio"]),
.designer-shell select,
.designer-shell textarea {
    border: 1px solid rgba(43, 152, 88, .46);
    border-radius: 12px;
    background: rgba(241, 251, 244, .76);
    box-shadow: inset 0 1px 7px rgba(5, 67, 49, .06);
    color: var(--liquid-deep);
    outline: none;
}
.designer-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.designer-shell select:focus,
.designer-shell textarea:focus {
    border-color: #27a96a;
    box-shadow: 0 0 0 4px rgba(41, 174, 106, .14), inset 0 1px 7px rgba(5, 67, 49, .05);
}
.designer-shell input::placeholder,
.designer-shell textarea::placeholder { color: rgba(16, 76, 59, .54); }
.designer-shell .catalog-filters input:not([type="checkbox"]):not([type="radio"]),
.designer-shell .catalog-filters select {
    border-color: rgba(101, 221, 149, .54);
    background: rgba(4, 58, 44, .7);
    color: #e1f6e8;
}
.designer-shell .catalog-filters input::placeholder { color: rgba(222, 246, 230, .7); }
.designer-shell .course-card {
    border: 1px solid rgba(47, 174, 101, .62);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(218, 241, 225, .72), rgba(135, 198, 158, .5));
    box-shadow: var(--liquid-shadow-soft);
    backdrop-filter: blur(22px) saturate(125%);
}
.designer-shell .course-card:hover { transform: translateY(-4px); box-shadow: var(--liquid-shadow); }
.designer-shell .course-card h3 a,
.designer-shell .course-card p,
.designer-shell .course-meta { color: var(--liquid-deep); }
.designer-shell .course-tags span { border: 1px solid rgba(82, 209, 132, .52); background: rgba(5, 66, 49, .7); color: #daf1e2; }
.designer-auth .auth-page { background: transparent; }
.designer-auth .auth-card { background: linear-gradient(145deg, rgba(215, 240, 222, .74), rgba(125, 190, 149, .48)); }
.designer-auth .form-field label,
.designer-auth .form-field small,
.designer-auth .muted { color: #174e3e; }

/* Udemy-like detail page retains its hierarchy, now with the designer glass. */
.modern-course-page { background-image: linear-gradient(rgba(178,222,192,.22),rgba(4,64,47,.26)),url("../img/designer/Fon_cyrs.jpg") !important; }
.modern-course-page .modern-course-hero {
    width: min(96%, 1500px);
    margin: 42px auto 0;
    overflow: hidden;
    border: 1px solid rgba(67, 196, 118, .58);
    border-radius: 28px;
    box-shadow: var(--liquid-shadow);
}
.modern-course-page .course-main-column > section,
.modern-course-page .purchase-card {
    border: 1px solid rgba(44, 166, 95, .48);
    background: linear-gradient(145deg, rgba(238, 249, 241, .82), rgba(174, 219, 188, .62));
    box-shadow: var(--liquid-shadow-soft);
    backdrop-filter: blur(22px) saturate(125%);
}
.modern-course-page .purchase-card,
.modern-course-page .course-main-column > section { border-radius: 24px; }
.modern-course-page .purchase-button { border: 1px solid rgba(93,224,146,.82); border-radius: 14px; background: linear-gradient(135deg,#07543f,#26915f); }
.modern-course-page .modern-module-list details { border-color: rgba(40,154,87,.3); background: rgba(244,251,246,.5); }
.modern-course-page .topics-panel a { border-color: rgba(47,169,96,.42); background: rgba(8,79,59,.72); color:#e3f7e9; }

/* Creator studio. */
.creator-studio-page,
.course-editor-page,
.conference-create-page,
.conference-room-page,
.cabinet-page,
.my-learning-page { background-image: linear-gradient(rgba(183,225,197,.22),rgba(4,64,47,.28)),url("../img/designer/Fon_profile.jpg") !important; }
.creator-studio-page .studio-hero {
    width: min(96%, 1500px);
    margin: 44px auto 0;
    border: 1px solid var(--liquid-line);
    border-radius: 28px;
    background: linear-gradient(120deg, rgba(5, 66, 49, .82), rgba(56, 139, 99, .58));
    box-shadow: var(--liquid-shadow);
    backdrop-filter: blur(24px);
}
.creator-studio-page .studio-button,
.creator-studio-page .studio-edit-button {
    border: 1px solid rgba(91, 222, 145, .72);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(7,81,60,.92), rgba(40,143,94,.82));
    color: #ebfff1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(3,55,39,.18);
}
.creator-studio-page .studio-button-secondary { background: rgba(210, 239, 219, .16); }
.creator-studio-page .studio-stats article,
.creator-studio-page .studio-live-card,
.creator-studio-page .studio-course-card,
.creator-studio-page .studio-empty-state {
    border: 1px solid rgba(45, 167, 96, .5);
    background: linear-gradient(145deg, rgba(232, 247, 236, .76), rgba(150, 207, 169, .5));
    box-shadow: var(--liquid-shadow-soft);
    backdrop-filter: blur(22px);
}
.creator-studio-page .studio-stats article { border-radius: 18px; }
.creator-studio-page .studio-course-card,
.creator-studio-page .studio-empty-state,
.creator-studio-page .studio-live-card { border-radius: 24px; }
.creator-studio-page .studio-course-body { background: transparent; }

/* Course editor. */
.course-editor-page .editor-hero,
.course-editor-page .editor-section,
.course-editor-page .editor-form-card,
.course-editor-page .editor-create-copy,
.course-editor-page .editor-nav,
.course-editor-page .module-editor,
.course-editor-page .add-module-card,
.course-editor-page .media-card,
.course-editor-page .gallery-editor {
    border: 1px solid rgba(46, 169, 97, .52);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(235, 248, 239, .78), rgba(154, 208, 172, .52));
    box-shadow: var(--liquid-shadow-soft);
    backdrop-filter: blur(22px) saturate(120%);
}
.course-editor-page .editor-hero,
.course-editor-page .editor-section { border-radius: 26px; }
.course-editor-page .editor-nav { position: sticky; border-radius: 16px; }
.course-editor-page .editor-primary,
.course-editor-page .editor-secondary {
    border: 1px solid rgba(83, 218, 138, .72);
    border-radius: 13px;
    background: linear-gradient(135deg,#07543f,#258e5e);
    color:#effff4;
}
.course-editor-page .editor-secondary { background: rgba(7, 78, 58, .72); }
.course-editor-page .lesson-editor,
.course-editor-page .nested-create { border-color: rgba(48, 158, 93, .38); background: rgba(240, 250, 243, .52); }
.course-editor-page .media-preview { border-color: rgba(50,170,98,.45); background-color: rgba(5,64,48,.76); }
.course-editor-page .editor-hero,
.course-editor-page .editor-create-copy {
    border-color: rgba(80, 205, 130, .5);
    background: linear-gradient(135deg, rgba(4, 56, 42, .88), rgba(42, 126, 89, .7));
    color: #f1fff5;
    box-shadow: var(--liquid-shadow);
}
.course-editor-page .editor-create-copy .editor-kicker,
.course-editor-page .editor-hero .editor-kicker { color: #8ce0aa; }
.course-editor-page .editor-create-copy p:not(.editor-kicker),
.course-editor-page .editor-create-copy a,
.course-editor-page .editor-status { color: rgba(238, 255, 244, .72); }

/* Personal cabinet: remove the unrelated black/violet/sand theme. */
.cabinet-page { --cab-ink: var(--liquid-deep); --cab-muted:#547367; --cab-mint:#38a96e; --cab-mint-dark:#14734f; --cab-mint-pale:rgba(198,231,208,.55); --cab-violet:#4b9b73; --cab-line:rgba(38,137,79,.22); --cab-paper:rgba(237,249,241,.68); --cab-shadow:var(--liquid-shadow); }
.cabinet-page .profile-card {
    border: 1px solid rgba(91, 218, 143, .48);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(4,57,43,.86), rgba(26,105,76,.7));
    box-shadow: var(--liquid-shadow);
    backdrop-filter: blur(24px);
}
.cabinet-page .cabinet-workspace,
.cabinet-page .course-accordion {
    border: 1px solid rgba(45, 169, 97, .46);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(239, 250, 242, .78), rgba(164, 213, 179, .52));
    box-shadow: var(--liquid-shadow);
    backdrop-filter: blur(24px) saturate(125%);
}
.cabinet-page .workspace-mode-switch,
.cabinet-page .organizer-tabs { background: rgba(5, 66, 49, .1); }
.cabinet-page .mode-button.active,
.cabinet-page .organizer-tab.active,
.cabinet-page .app-filter.active { background: linear-gradient(135deg,#07543f,#278d5e); color:white; }
.cabinet-page .active-chat,
.cabinet-page .chat-sidebar,
.cabinet-page .week-calendar,
.cabinet-page .chat-room-head { background-color: rgba(244,251,246,.5); }
.cabinet-page .metric-card { border: 1px solid rgba(102,223,149,.3); background: linear-gradient(145deg,#176c4d,#55a477) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.cabinet-page .creator-course-action { border: 1px solid rgba(83,215,136,.5); border-radius:24px; background:linear-gradient(115deg,rgba(4,60,45,.88),rgba(48,129,91,.7)),url("../img/designer/Fon_edit.jpg") center/cover; }
.cabinet-page .cabinet-course-card,
.cabinet-page .application-card,
.cabinet-page .event-row,
.cabinet-page .modal-card { border-color:rgba(43,156,88,.3); background:rgba(241,250,244,.7); backdrop-filter:blur(18px); }

/* My courses. */
.my-learning-page .learning-hero {
    width: min(96%, 1500px);
    min-height: 370px;
    margin: 44px auto 0;
    border: 1px solid rgba(77,203,127,.56);
    border-radius: 28px;
    background: linear-gradient(110deg, rgba(4, 58, 44, .86), rgba(28, 112, 78, .62)), url("../img/aurora-bg.jpg") center/cover;
    box-shadow: var(--liquid-shadow);
    backdrop-filter: blur(20px);
}
.my-learning-page .learning-card,
.my-learning-page .empty-learning {
    border: 1px solid rgba(44, 165, 95, .5);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(235, 249, 239, .78), rgba(157, 210, 174, .52));
    box-shadow: var(--liquid-shadow-soft);
    backdrop-filter: blur(22px);
}
.my-learning-page .continue-button { color:var(--liquid-deep); }

/* Conference creation and live room. */
.conference-room-page .lobby-card {
    border: 1px solid rgba(61, 187, 111, .55);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(5, 63, 47, .82), rgba(74, 151, 105, .54));
    box-shadow: var(--liquid-shadow);
    backdrop-filter: blur(25px);
}
.conference-create-page .conference-create-shell { border:0; background:transparent; box-shadow:none; }
.conference-create-page .conference-create-copy {
    border-color: rgba(75, 199, 124, .52);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(4, 56, 42, .88), rgba(42, 126, 89, .7));
    box-shadow: var(--liquid-shadow);
    backdrop-filter: blur(24px);
}
.conference-create-page .conference-create-form {
    border: 1px solid rgba(78, 201, 127, .52);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(236, 249, 240, .82), rgba(162, 213, 178, .58));
    box-shadow: var(--liquid-shadow-soft);
    backdrop-filter: blur(22px);
}
.conference-create-page .conference-create-actions button,
.conference-room-page #joinConference {
    border:1px solid rgba(98,224,148,.74);
    border-radius:14px;
    background:linear-gradient(135deg,#07543f,#278f5f);
}
.conference-room-page .meeting-shell { background: linear-gradient(145deg, rgba(3,45,35,.96), rgba(7,72,53,.94)); }
.conference-room-page .meeting-header,
.conference-room-page .meeting-controls,
.conference-room-page .meeting-sidebar {
    border-color: rgba(91, 207, 137, .3);
    background: rgba(7, 66, 50, .72);
    backdrop-filter: blur(24px);
}
.conference-room-page .video-tile { border-color:rgba(89,210,138,.48); background:#082e25; }
.conference-room-page .sidebar-tab.active,
.conference-room-page .media-control.active { border-color:#55ca83; background:rgba(50,166,100,.26); color:#e8f9ed; }

/* The learning player is standalone but belongs to the same system. */
.player-page {
    --ink:var(--liquid-deep); --green:var(--liquid-green); --mint:var(--liquid-bright); --paper:rgba(235,248,239,.74); --line:rgba(47,155,91,.27);
    background-image:linear-gradient(rgba(194,229,205,.34),rgba(6,63,47,.18)),url("../img/designer/fon_web.jpg");
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
}
.player-page .player-header { border-bottom:1px solid rgba(93,215,140,.36); background:rgba(4,55,42,.86); box-shadow:0 12px 38px rgba(1,36,27,.2); backdrop-filter:blur(24px); }
.player-page .lesson-stage { background:rgba(230,244,235,.6); }
.player-page .lesson-media { background:radial-gradient(circle at 50% 10%,rgba(32,108,81,.88),rgba(3,36,28,.96) 74%); }
.player-page .lesson-media video { border:1px solid rgba(94,214,140,.4); border-radius:18px; box-shadow:0 28px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.2); }
.player-page .lesson-actions,
.player-page .curriculum-sidebar,
.player-page .lesson-quiz fieldset,
.player-page .lesson-resources a,
.player-page .quiz-author-note,
.player-page .quiz-result { border-color:rgba(44,155,89,.3); background:rgba(237,249,241,.72); backdrop-filter:blur(22px); }
.player-page .lesson-actions button,
.player-page .quiz-footer button { border:1px solid rgba(90,220,143,.72); background:linear-gradient(135deg,#07543f,#278f5f); }
.player-page .player-module li.active a { border-left-color:#26aa69; background:rgba(153,213,174,.5); }

@media (max-width: 760px) {
    .designer-shell .site-header { border-width: 1px; border-radius: 18px; }
    .designer-shell .site-header::after { display:none; }
    .designer-shell .brand,
    .designer-shell .main-nav a:not(.button),
    .designer-shell .link-button { border-width:1px; border-radius:9px; }
    .modern-course-page .modern-course-hero,
    .creator-studio-page .studio-hero,
    .my-learning-page .learning-hero { width:calc(100% - 20px); margin-top:28px; border-radius:22px; }
    .course-editor-page .editor-hero,
    .course-editor-page .editor-section,
    .cabinet-page .profile-card,
    .cabinet-page .cabinet-workspace { border-radius:20px; }
    .player-page .lesson-media video { border-radius:0; border-right:0; border-left:0; }
}