.date-shell {
position: relative;
display: inline-flex;
align-items: center;
}
.date-shell .date-shell-ph {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-muted);
font-size: 13px;
font-family: inherit;
user-select: none;
white-space: nowrap;
}
.date-shell.has-value .date-shell-ph,
.date-shell:focus-within .date-shell-ph {
display: none;
}
.date-shell:not(.has-value):not(:focus-within) input[type="date"]::-webkit-datetime-edit-month-field,
.date-shell:not(.has-value):not(:focus-within) input[type="date"]::-webkit-datetime-edit-day-field,
.date-shell:not(.has-value):not(:focus-within) input[type="date"]::-webkit-datetime-edit-year-field,
.date-shell:not(.has-value):not(:focus-within) input[type="date"]::-webkit-datetime-edit-text {
color: transparent;
}
:root {
--bg: #0f1117;
--bg2: #1a1d27;
--panel: rgba(26, 29, 39, 0.8);
--panel-solid: #1e2130;
--sidebar: rgba(15, 17, 23, 0.95);
--sidebar-primary: #1e293b;
--secondary: #1e2130;
--accent: #3b82f6;
--accent-hover: #2563eb;
--accent-glow: rgba(59, 130, 246, 0.15);
--success: #22c55e;
--success-bg: rgba(34, 197, 94, 0.12);
--danger: #ef4444;
--danger-bg: rgba(239, 68, 68, 0.12);
--warning: #f59e0b;
--text: #e2e8f0;
--text-dim: #94a3b8;
--text-muted: #64748b;
--border: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.15);
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
--transition: 0.2s ease;
--blob1: rgba(59, 130, 246, 0.12);
--blob2: rgba(139, 92, 246, 0.08);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
transition: background 0.3s, color 0.3s;
}
body.admin-theme-default {
--bg: #fffcf5;
--bg2: #fdf6e3;
--panel: rgba(255, 250, 235, 0.9);
--panel-solid: #fffaf0;
--sidebar: rgba(255, 252, 245, 0.75);
--sidebar-primary: #fff8e7;
--secondary: #fef3c7;
--accent: #f59e0b;
--accent-hover: #d97706;
--accent-glow: rgba(245, 158, 11, 0.15);
--accent-text: #1a1a1a;
--success: #22c55e;
--success-bg: rgba(34, 197, 94, 0.08);
--danger: #ef4444;
--danger-bg: rgba(239, 68, 68, 0.08);
--warning: #f59e0b;
--text: #334155;
--text-dim: #5b7088;
--text-muted: #9fb0c4;
--border: rgba(0, 0, 0, 0.06);
--border-hover: rgba(0, 0, 0, 0.12);
--shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
--blob1: rgba(245, 158, 11, 0.15);
--blob2: rgba(234, 88, 12, 0.08);
}
body.admin-theme-default .toast-success {
background: #dcfce7;
color: #166534;
border-color: rgba(22, 163, 74, 0.3);
}
body.admin-theme-default .toast-error {
background: #fee2e2;
color: #991b1b;
border-color: rgba(220, 38, 38, 0.3);
}
body.admin-theme-default .toast-info {
background: #dbeafe;
color: #1e40af;
border-color: rgba(59, 130, 246, 0.3);
}
body.admin-theme-default .main-header {
background: rgba(255, 252, 245, 0.8);
}
body.admin-theme-default a {
color: var(--text);
}
body.admin-theme-default .sidebar-footer a,
body.admin-theme-default .sidebar-footer .logout-btn,
body.admin-theme-default .sidebar-footer button {
color: var(--text-dim);
}
body.admin-theme-default .nav-item.active {
color: #fff;
}
body.admin-theme-default .nav-item.active .icon {
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}
body.admin-theme-default .nav-item:hover {
color: #1a1a1a;
}
body.admin-theme-default .btn.primary,
body.admin-theme-default .btn.primary:hover,
body.admin-theme-default .btn-primary,
body.admin-theme-default .btn-primary:hover,
body.admin-theme-default .le-lang-tab.active,
body.admin-theme-default .sch-tab.active,
body.admin-theme-default .chip.active,
body.admin-theme-default .btn[style*="background:var(--accent"],
body.admin-theme-default .btn[style*="background: var(--accent"],
body.admin-theme-default [style*="background:var(--accent"],
body.admin-theme-default [style*="background: var(--accent"],
body.admin-theme-default .badge[style*="background:var(--accent"],
body.admin-theme-default .badge[style*="background: var(--accent"],
body.admin-theme-default span[style*="background:var(--accent"],
body.admin-theme-default span[style*="background: var(--accent"],
body.admin-theme-default .msg-bubble.sent,
body.admin-theme-default .msg-send-btn,
body.admin-theme-default .msg-compose-btn,
body.admin-theme-default .login-tab.active,
body.admin-theme-default .login-card .login-btn,
body.admin-theme-default .login-card .login-btn:hover,
body.admin-theme-default [style*="color:var(--accent"],
body.admin-theme-default [style*="color: var(--accent"],
body.admin-theme-default a[style*="color:var(--accent"],
body.admin-theme-default a[style*="color: var(--accent"] {
color: #1a1a1a !important;
}
body.admin-theme-default .badge {
color: #1a1a1a;
}
body.admin-theme-default .dict-file-item.active,
body.admin-theme-default .img-dict-item.active,
body.admin-theme-default .le-sidebar-item.active,
body.admin-theme-default .toggle-btn.active,
body.admin-theme-default .ej-block-label,
body.admin-theme-default .ej-btn {
color: #1a1a1a;
}
body.admin-theme-blue {
--bg: #fbfdff;
--bg2: #f5f9ff;
--panel: rgba(255, 255, 255, 0.9);
--panel-solid: #ffffff;
--sidebar: rgba(255, 255, 255, 0.8);
--sidebar-primary: #eef6ff;
--secondary: #f5f9ff;
--accent: #3bbceb;
--accent-hover: #2aa3d0;
--accent-glow: rgba(59, 188, 235, 0.12);
--success: #22c55e;
--success-bg: rgba(34, 197, 94, 0.1);
--danger: #ef4444;
--danger-bg: rgba(239, 68, 68, 0.1);
--warning: #f59e0b;
--text: #1e3a5f;
--text-dim: #4a7098;
--text-muted: #8baac4;
--border: rgba(0, 0, 0, 0.06);
--border-hover: rgba(0, 0, 0, 0.1);
--shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
--blob1: rgba(59, 188, 235, 0.12);
--blob2: rgba(96, 165, 250, 0.10);
}
body.admin-theme-blue .toast-success {
background: #dcfce7;
color: #166534;
border-color: rgba(22, 163, 74, 0.3);
}
body.admin-theme-blue .toast-error {
background: #fee2e2;
color: #991b1b;
border-color: rgba(220, 38, 38, 0.3);
}
body.admin-theme-blue .toast-info {
background: #dbeafe;
color: #1e40af;
border-color: rgba(59, 130, 246, 0.3);
}
body.admin-theme-blue .main-header {
background: rgba(255, 255, 255, 0.8);
}
body.admin-theme-orange {
--bg: #fffaf5;
--bg2: #fff0e6;
--panel: rgba(255, 248, 240, 0.9);
--panel-solid: #fffaf5;
--sidebar: rgba(255, 250, 245, 0.75);
--sidebar-primary: #fff3e8;
--secondary: #ffedd5;
--accent: #fb923c;
--accent-hover: #f97316;
--accent-glow: rgba(251, 146, 60, 0.15);
--success: #7ed3b1;
--success-bg: rgba(126, 211, 177, 0.1);
--danger: #ff98a8;
--danger-bg: rgba(255, 152, 168, 0.1);
--warning: #ffd89a;
--text: #334155;
--text-dim: #5b7088;
--text-muted: #9fb0c4;
--border: rgba(0, 0, 0, 0.06);
--border-hover: rgba(0, 0, 0, 0.12);
--shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
--blob1: rgba(251, 146, 60, 0.15);
--blob2: rgba(255, 214, 232, 0.12);
}
body.admin-theme-orange .main-header {
background: rgba(255, 250, 245, 0.8);
}
body.admin-theme-orange .toast-success {
background: #ecfccb;
color: #365314;
border-color: rgba(101, 163, 13, 0.3);
}
body.admin-theme-orange .toast-error {
background: #fee2e2;
color: #991b1b;
border-color: rgba(239, 68, 68, 0.3);
}
body.admin-theme-orange .toast-info {
background: #ffedd5;
color: #9a3412;
border-color: rgba(251, 146, 60, 0.3);
}
body.admin-theme-casual {
--bg: #faf5ff;
--bg2: #f3e8ff;
--panel: rgba(248, 243, 255, 0.9);
--panel-solid: #faf5ff;
--sidebar: rgba(250, 245, 255, 0.75);
--sidebar-primary: #f5f0ff;
--secondary: #f3e8ff;
--accent: #a78bfa;
--accent-hover: #8b5cf6;
--accent-glow: rgba(167, 139, 250, 0.15);
--success: #7ed3b1;
--success-bg: rgba(126, 211, 177, 0.1);
--danger: #ff98a8;
--danger-bg: rgba(255, 152, 168, 0.1);
--warning: #ffd89a;
--text: #334155;
--text-dim: #5b7088;
--text-muted: #9fb0c4;
--border: rgba(0, 0, 0, 0.06);
--border-hover: rgba(0, 0, 0, 0.12);
--shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
--blob1: rgba(167, 139, 250, 0.15);
--blob2: rgba(236, 72, 153, 0.08);
}
body.admin-theme-casual .main-header {
background: rgba(250, 245, 255, 0.8);
}
body.admin-theme-casual .toast-success {
background: #dcfce7;
color: #166534;
border-color: rgba(34, 197, 94, 0.3);
}
body.admin-theme-casual .toast-error {
background: #fee2e2;
color: #991b1b;
border-color: rgba(239, 68, 68, 0.3);
}
body.admin-theme-casual .toast-info {
background: #ede9fe;
color: #5b21b6;
border-color: rgba(167, 139, 250, 0.3);
}
body::before,
body::after {
content: '';
position: fixed;
border-radius: 999px;
filter: blur(80px);
z-index: 0;
pointer-events: none;
}
body::before {
width: 700px;
height: 700px;
background: var(--blob1, rgba(59, 130, 246, 0.12));
top: -200px;
left: -200px;
}
body::after {
content: '';
position: fixed;
width: 800px;
height: 800px;
background: var(--blob2, rgba(139, 92, 246, 0.08));
bottom: -300px;
right: -200px;
border-radius: 999px;
filter: blur(80px);
z-index: 0;
pointer-events: none;
}
body:not([class*="admin-theme"]) .sidebar {
background: rgba(15, 17, 23, 0.85);
border-color: rgba(255, 255, 255, 0.06);
}
body:not([class*="admin-theme"]) .main-header {
background: rgba(15, 17, 23, 0.85);
border-color: rgba(255, 255, 255, 0.06);
}
body:not([class*="admin-theme"]) .nav-item:hover {
background: rgba(255, 255, 255, 0.03);
}
body:not([class*="admin-theme"]) .nav-item.active {
background: var(--accent-glow);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body:not([class*="admin-theme"]) .logout-btn {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.06);
}
a {
color: var(--accent);
text-decoration: none;
}
#loginScreen {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
position: relative;
z-index: 1;
overflow: hidden;
padding: 16px;
box-sizing: border-box;
}
.login-card {
background: var(--panel);
backdrop-filter: blur(24px);
border: 1px solid var(--border);
border-radius: 20px;
padding: 48px 40px;
width: 100%;
max-width: 400px;
text-align: center;
box-shadow: var(--shadow);
}
@media (max-width: 480px) {
.login-card {
padding: 32px 24px;
border-radius: 16px;
}
}
.login-card img {
height: 64px;
margin-bottom: 16px;
}
.login-card h1 {
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
}
.login-card p {
color: var(--text-dim);
font-size: 14px;
margin-bottom: 28px;
}
.login-card input {
width: 100%;
padding: 14px 16px;
font-size: 15px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
outline: none;
transition: border var(--transition);
font-family: inherit;
}
.login-card input:focus {
border-color: var(--accent);
}
.login-card .login-btn {
width: 100%;
padding: 14px;
margin-top: 16px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
font-family: inherit;
}
.login-card .login-btn:hover {
background: var(--accent-hover);
transform: translateY(-1px);
}
.login-tabs {
display: flex;
gap: 0;
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
}
.login-tab {
flex: 1;
padding: 10px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
border: none;
background: transparent;
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s;
}
.login-tab.active {
background: var(--accent);
color: #fff;
}
.login-tab:not(.active):hover {
background: var(--bg-hover, rgba(0,0,0,0.05));
}
.login-error {
color: var(--danger);
font-size: 13px;
margin-top: 12px;
display: none;
animation: shake 0.4s;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-8px);
}
75% {
transform: translateX(8px);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
}
#appLayout {
display: none;
position: relative;
z-index: 1;
padding: 16px;
gap: 24px;
}
.sidebar {
position: fixed;
left: 10px;
top: 10px;
bottom: 10px;
width: 310px;
background: var(--sidebar);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 28px;
display: flex;
flex-direction: column;
padding: 16px 4px 12px 16px;
z-index: 100;
transition: transform 0.3s ease;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.03);
scrollbar-color: var(--border) transparent;
scrollbar-width: thin;
overflow-y: auto;
}
.sidebar > *, .sidebar-nav > * { margin-right: 8px; }
#sidebarResizeHandle { position: fixed; left: 323px; top: 10px; bottom: 10px; width: 6px; z-index: 101; cursor: col-resize; }
#sidebarResizeHandle::after { content: ''; position: absolute; top: 40px; bottom: 40px; left: 2px; width: 2px; background: var(--border); border-radius: 2px; transition: background 0.2s; }
#sidebarResizeHandle:hover::after, #sidebarResizeHandle.dragging::after { background: var(--accent); }
.sidebar-expand-btn {
position: fixed;
left: 12px;
top: 15px;
z-index: 102;
width: 36px;
height: 36px;
border-radius: 12px;
background: var(--panel-solid, #fff);
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform .15s, background .15s, box-shadow .15s;
padding: 0;
}
.sidebar-expand-btn:hover {
background: var(--panel-solid, #fff);
border-color: var(--accent);
color: var(--accent);
transform: scale(1.06);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
body.sidebar-collapsed .sidebar { transform: translateX(calc(-100% - 30px)); }
body.sidebar-collapsed #sidebarResizeHandle { display: none !important; }
body.sidebar-collapsed .sidebar-expand-btn { display: flex; }
body.sidebar-collapsed .main { padding-left: 52px; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #888); }
.sidebar-logo-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px 12px;
margin-bottom: 4px;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 14px;
}
.sidebar-logo-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.sidebar-logo-btn {
flex: 0 !important;
padding: 5px !important;
font-size: 14px !important;
width: 30px;
height: 30px;
border-radius: 10px !important;
}
.sidebar-logo img {
height: 40px;
}
.sidebar-logo span {
font-size: 18px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.5px;
}
.sidebar-nav {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
overflow-y: auto;
min-height: 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
font-size: 14px;
font-weight: 600;
color: var(--text-dim);
cursor: pointer;
border-radius: 16px;
transition: all var(--transition);
}
.nav-item:hover {
color: var(--text);
background: rgba(0, 0, 0, 0.03);
}
.nav-item.active {
color: #fff;
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000 30%));
box-shadow: none;
font-weight: 700;
}
.nav-item.active .icon,
.nav-item.active .nav-icon svg {
color: #fff;
stroke: #fff;
}
.nav-item .icon {
font-size: 18px;
width: 24px;
text-align: center;
}
.nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
color: #fff;
font-size: 0;
vertical-align: middle;
flex-shrink: 0;
}
.nav-icon svg {
width: 16px;
height: 16px;
}
.nav-child .nav-icon {
width: 22px;
height: 22px;
border-radius: 6px;
}
.nav-child .nav-icon svg {
width: 12px;
height: 12px;
}
.nav-icon--blue { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.nav-icon--green { background: linear-gradient(135deg, #22c55e, #4ade80); }
.nav-icon--red { background: linear-gradient(135deg, #ef4444, #f87171); }
.nav-icon--purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.nav-icon--amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.nav-icon--teal { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.nav-icon--pink { background: linear-gradient(135deg, #ec4899, #f472b6); }
.nav-icon--slate { background: linear-gradient(135deg, #64748b, #94a3b8); }
.nav-icon--indigo { background: linear-gradient(135deg, #6366f1, #818cf8); }
.nav-group { margin-top: 6px; }
.nav-group-toggle {
justify-content: flex-start;
position: relative;
}
.nav-group-arrow {
position: absolute;
right: 16px;
font-size: 18px;
color: var(--text-dim);
transition: transform 0.25s ease;
}
.nav-group.open > .nav-group-toggle .nav-group-arrow {
transform: rotate(90deg);
}
.nav-group-children {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
}
.nav-group.open > .nav-group-children {
max-height: 800px;
overflow: visible;
}
.nav-child {
padding-left: 44px !important;
font-size: 13px;
position: relative;
border-radius: 14px;
}
.nav-child > .dict-status-dot {
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.nav-child .icon {
font-size: 15px;
width: 20px;
}
.sidebar-footer {
padding: 8px 4px;
margin-top: auto;
display: flex;
justify-content: center;
gap: 8px;
}
.sidebar-footer .logout-btn {
flex: 0;
padding: 6px;
}
.logout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 1;
padding: 7px 8px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 14px;
color: var(--text-dim);
font-size: 12px;
cursor: pointer;
font-family: inherit;
transition: all var(--transition);
}
.logout-btn:hover {
background: rgba(0, 0, 0, 0.04);
border-color: var(--border-hover);
}
.logout-btn#logoutBtn:hover {
color: var(--danger);
border-color: var(--danger);
background: rgba(239, 68, 68, 0.06);
}
.main {
margin-left: 316px;
min-height: 100vh;
}
.main-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.9);
border-top: none;
border-radius: 0 0 20px 20px;
padding: 16px 24px;
margin: -16px 8px 4px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}
.main-header h2 {
font-size: 18px;
font-weight: 700;
}
.main-body {
padding: 16px 8px;
animation: fadeIn 0.3s ease;
}
.burger {
display: none;
position: fixed;
top: 12px;
left: 8px;
z-index: 200;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 14px;
padding: 10px 12px;
font-size: 20px;
cursor: pointer;
color: var(--text);
}
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 90;
}
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--panel);
color: var(--text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all var(--transition);
}
.btn-primary {
background: var(--accent);
color: #fff;
}
.btn-primary:hover {
background: var(--accent-hover);
transform: translateY(-1px);
}
.btn-test {
background: #6366f1;
color: #fff;
border-color: #6366f1;
}
.btn-test:hover {
background: #4f46e5;
border-color: #4f46e5;
transform: translateY(-1px);
}
.btn-danger {
background: var(--danger-bg);
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn-danger:hover {
background: rgba(239, 68, 68, 0.2);
}
.btn-ghost {
background: none;
color: var(--text-dim);
border: 1px solid var(--border);
}
.btn-ghost:hover {
color: var(--text);
border-color: var(--border-hover);
}
.btn-success {
background: var(--success-bg);
color: var(--success);
border: 1px solid rgba(34, 197, 94, 0.2);
}
.btn-success:hover {
background: rgba(34, 197, 94, 0.2);
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
}
.card {
background: var(--panel);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
}
.input {
width: 100%;
padding: 10px 14px;
font-size: 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
outline: none;
transition: border var(--transition);
font-family: inherit;
}
.input:focus {
border-color: var(--accent);
}
.search-wrap {
position: relative;
width: 100%;
}
.search-wrap input {
padding-left: 36px;
}
.search-wrap::before {
content: '🔍';
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
pointer-events: none;
}
.badge {
display: inline-flex;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 6px;
background: var(--accent-glow);
color: var(--accent);
}
#toastContainer {
position: fixed;
top: 20px;
right: 20px;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 8px;
}
.toast {
padding: 12px 20px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
animation: slideIn 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
min-width: 260px;
}
.toast-success {
background: #065f46;
color: #a7f3d0;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.toast-error {
background: #7f1d1d;
color: #fca5a5;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.toast-info {
background: #1e3a5f;
color: #bfdbfe;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.confirm-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 10010;
align-items: center;
justify-content: center;
}
.confirm-overlay.show {
display: flex;
}
.confirm-box {
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: var(--shadow);
}
.confirm-box h3 {
font-size: 16px;
margin-bottom: 8px;
}
.confirm-box p {
color: var(--text-dim);
font-size: 14px;
margin-bottom: 24px;
}
.confirm-box p.multiline {
white-space: pre-line;
text-align: left;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.confirm-box .rd-wrap { text-align: left; }
.confirm-box .rd-header {
font-weight: 600;
color: var(--text);
margin-bottom: 14px;
text-align: left;
}
.confirm-box .rd-list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 16px;
}
.confirm-box .rd-li {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.confirm-box .rd-li-ico {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--accent, #6366f1);
}
.confirm-box .rd-li-txt { color: var(--text-dim); }
.confirm-box .rd-li-txt b { color: var(--text); font-weight: 600; }
.confirm-box .rd-question { margin-top: 14px; color: var(--text-dim); text-align: center; }
.progress-overlay { z-index: 10003; }
.progress-overlay .progress-box { max-width: 340px; padding: 28px 24px; }
.progress-overlay .progress-box h3 { margin-bottom: 6px; }
.progress-overlay .progress-msg { margin-bottom: 0; color: var(--text-dim); font-size: 13px; }
.progress-spinner {
width: 44px;
height: 44px;
margin: 0 auto 14px;
border: 3px solid var(--border);
border-top-color: var(--accent, #6366f1);
border-radius: 50%;
animation: progressSpin 0.8s linear infinite;
}
@keyframes progressSpin { to { transform: rotate(360deg); } }
.confirm-actions {
display: flex;
gap: 10px;
justify-content: center;
}
.skeleton {
background: linear-gradient(90deg, var(--bg2) 0%, rgba(255, 255, 255, 0.05) 50%, var(--bg2) 100%);
background-size: 200% 100%;
animation: pulse 1.5s infinite;
border-radius: var(--radius-sm);
}
.dict-layout {
display: flex;
gap: 24px;
min-height: 60vh;
}
.dict-layout > .card:first-child {
width: 280px;
min-width: 180px;
max-width: 50%;
flex-shrink: 0;
overflow: auto;
}
.dict-layout > .card.dict-detail {
flex: 1;
min-width: 0;
}
.dict-tree {
display: flex;
flex-direction: column;
gap: 4px;
}
.dict-level-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
font-size: 13px;
font-weight: 700;
color: var(--text-dim);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--transition);
user-select: none;
}
.dict-level-header:hover {
background: rgba(255, 255, 255, 0.03);
}
.dict-level-header .arrow {
transition: transform var(--transition);
font-size: 10px;
}
.dict-level-header.open .arrow {
transform: rotate(90deg);
}
.dict-level-files {
display: none;
padding-left: 16px;
}
.dict-level-header.open+.dict-level-files {
display: flex;
flex-direction: column;
gap: 2px;
}
.dict-file-item {
padding: 8px 14px;
font-size: 13px;
border-radius: var(--radius-sm);
cursor: grab;
color: var(--text-dim);
transition: all var(--transition);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 6px;
}
.dict-file-item:hover {
background: rgba(255, 255, 255, 0.03);
color: var(--text);
}
.dict-file-item.active {
background: var(--accent-glow);
color: var(--accent);
}
.dict-file-item .drag-handle { color: var(--text-muted); font-size: 14px; opacity: 0; transition: opacity var(--transition); flex-shrink: 0; }
.dict-file-item:hover .drag-handle { opacity: 0.6; }
.dict-file-item.dragging { opacity: 0.3; transform: scale(0.97); }
.dict-file-item.drop-above { position: relative; }
.dict-file-item.drop-below { position: relative; }
.dict-file-item.drop-above::before { content: ''; position: absolute; top: -1px; left: 8px; right: 8px; height: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; }
.dict-file-item.drop-below::after { content: ''; position: absolute; bottom: -1px; left: 8px; right: 8px; height: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; }
.dict-level-header.drop-target { background: var(--accent); color: #1a1a1a; border-radius: 8px; outline: 2px dashed #333; outline-offset: -2px; }
.dict-level-header.drop-target > * { pointer-events: none; }
.dict-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dict-status-dot.published { background: #22c55e; }
.dict-status-dot.draft { background: #ef4444; }
.dict-status-dot.announced { background: #f59e0b; }
.dict-status-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); transition: all var(--transition); }
.dict-status-toggle.published { background: rgba(34,197,94,0.12); color: #16a34a; border-color: rgba(34,197,94,0.3); }
.dict-status-toggle.draft { background: rgba(239,68,68,0.12); color: #dc2626; border-color: rgba(239,68,68,0.3); }
.dict-status-toggle.announced { background: rgba(245,158,11,0.12); color: #d97706; border-color: rgba(245,158,11,0.3); }
.dict-status-toggle.op-mode-page { background: rgba(59,130,246,0.12); color: #2563eb; border-color: rgba(59,130,246,0.3); }
.dict-status-toggle.op-mode-popup { background: rgba(139,92,246,0.12); color: #7c3aed; border-color: rgba(139,92,246,0.3); }
.dict-status-dot.op-mode-page { background: #3b82f6; }
.dict-status-dot.op-mode-popup { background: #8b5cf6; }
.dict-status-toggle:hover { filter: brightness(0.9); }
.dict-detail {
min-width: 0;
}
.dict-detail-empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 14px;
min-height: 300px;
}
.dict-table-wrap {
overflow-x: auto;
margin-top: 16px;
}
.dict-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.dict-table.thw-hw-table { table-layout: fixed; min-width: 900px; }
.dict-table.thw-hw-table th:nth-child(1),
.dict-table.thw-hw-table td:nth-child(1) { width: 50px; }
.dict-table.thw-hw-table th:nth-child(3),
.dict-table.thw-hw-table td:nth-child(3) { width: 130px; }
.dict-table.thw-hw-table th:nth-child(4),
.dict-table.thw-hw-table td:nth-child(4) { width: 200px; }
.dict-table.thw-hw-table th:nth-child(5),
.dict-table.thw-hw-table td:nth-child(5) { width: 100px; }
.dict-table.thw-hw-table th:nth-child(6),
.dict-table.thw-hw-table td:nth-child(6) { width: 100px; }
.dict-table.thw-hw-table th:nth-child(7),
.dict-table.thw-hw-table td:nth-child(7) { width: 130px; }
.dict-table.thw-hw-table td:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dict-table th {
text-align: left;
padding: 10px 12px;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
}
.dict-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--border);
color: var(--text-dim);
}
.dict-table tr:hover td {
background: rgba(255, 255, 255, 0.02);
}
.dict-table td.editable {
padding: 0;
}
.dict-table td.editable input {
width: 100%;
padding: 8px 12px;
background: transparent;
border: none;
color: var(--text);
font-size: 13px;
font-family: inherit;
outline: none;
}
.dict-table td.editable input:focus {
background: var(--accent-glow);
}
.dict-table td.row-actions {
padding: 4px 8px;
white-space: nowrap;
}
.dict-table td.row-actions button {
background: none;
border: none;
cursor: pointer;
font-size: 14px;
padding: 2px 4px;
opacity: 0.5;
transition: opacity 0.15s;
}
.dict-table td.row-actions button:hover {
opacity: 1;
}
.dict-table td.img-cell {
padding: 4px 6px;
width: 64px;
min-width: 64px;
text-align: center;
}
.dict-table td.img-cell img {
width: 64px;
height: 40px;
object-fit: cover;
border-radius: 4px;
border: 1px solid var(--border);
display: block;
}
.dict-table td.img-cell .img-placeholder {
width: 64px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px dashed var(--border);
color: var(--text-muted);
font-size: 16px;
opacity: 0.4;
}
.dict-table td.img-cell .img-cell-wrap {
display: flex;
align-items: center;
gap: 4px;
}
.dict-table td.img-cell .img-thumb {
cursor: pointer;
flex-shrink: 0;
}
.dict-table td.img-cell .img-upload-btn {
width: 20px;
height: 20px;
border: none;
background: none;
cursor: pointer;
color: var(--text-muted);
font-size: 13px;
padding: 0;
flex-shrink: 0;
opacity: 1;
transition: opacity var(--transition);
}
.dict-table td.img-cell .img-upload-btn:hover { opacity: 1; color: var(--accent); }
.dict-table.sort-compact th { padding: 8px 6px; }
.dict-table.sort-compact td { padding: 6px; }
.dict-table.sort-compact td.editable input { padding: 6px; font-size: 12px; }
.dict-table.sort-compact td.row-actions { padding: 2px 4px; }
.sort-cat-cell { width: 52px; max-width: 52px; }
.sort-cat-select {
width: 100%;
padding: 4px 2px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg);
color: var(--text);
font-size: 12px;
box-sizing: border-box;
cursor: pointer;
text-align: center;
appearance: none;
-webkit-appearance: none;
}
.sort-cat-select:focus { border-color: var(--accent); outline: none; }
.ai-gen-btn {
width: 22px;
height: 22px;
border: none;
background: none;
cursor: pointer;
font-size: 14px;
padding: 0;
flex-shrink: 0;
opacity: 1;
transition: opacity var(--transition);
border-radius: 4px;
}
.ai-gen-btn:hover { opacity: 1; }
.ai-gen-btn:disabled { cursor: wait; opacity: 0.7 !important; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: ai-spin 0.7s linear infinite;
}
.ai-img-progress {
display: none;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 10px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
}
.ai-img-progress-bar {
flex: 1;
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.ai-img-progress-fill {
width: 30%;
height: 100%;
background: var(--accent);
border-radius: 3px;
animation: ai-progress 2s ease-in-out infinite;
}
@keyframes ai-progress {
0% { width: 10%; margin-left: 0; }
50% { width: 40%; margin-left: 30%; }
100% { width: 10%; margin-left: 90%; }
}
.ai-img-progress-text {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
color: var(--text);
}
.ai-preview-popup {
display: none;
position: fixed;
inset: 0;
z-index: 10002;
align-items: center;
justify-content: center;
}
.ai-preview-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
}
.ai-preview-content {
position: relative;
background: var(--card, #fff);
border-radius: 16px;
overflow: hidden;
max-width: 720px;
width: 90%;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ai-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
font-size: 15px;
font-weight: 600;
border-bottom: 1px solid var(--border);
}
.ai-preview-close {
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: var(--text-muted);
padding: 0 4px;
}
.ai-preview-close:hover { color: var(--text); }
.ai-preview-img {
width: 100%;
display: block;
max-height: 60vh;
object-fit: contain;
background: #f0f0f0;
}
.ai-preview-actions {
display: flex;
gap: 10px;
padding: 14px 20px;
justify-content: flex-end;
border-top: 1px solid var(--border);
}
.img-preview-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
z-index: 10001;
align-items: center;
justify-content: center;
cursor: pointer;
}
.img-preview-overlay.show { display: flex; }
.img-preview-overlay .img-preview-box {
position: relative;
display: inline-block;
cursor: default;
}
.img-preview-overlay img {
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: var(--radius);
box-shadow: 0 8px 40px rgba(0,0,0,0.5);
display: block;
}
.img-preview-overlay .img-preview-close {
position: absolute;
top: -12px;
right: -12px;
width: 32px;
height: 32px;
border: 2px solid #fff;
border-radius: 50%;
background: rgba(15, 23, 42, 0.92);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
transition: background 0.15s, transform 0.15s;
padding: 0;
}
.img-preview-overlay .img-preview-close:hover {
background: #1f2937;
transform: scale(1.08);
}
.img-preview-overlay .img-preview-actions {
margin-top: 14px;
display: flex;
justify-content: center;
}
.img-preview-overlay .img-preview-delete {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border: none;
border-radius: 8px;
background: #ef4444;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.img-preview-overlay .img-preview-delete:hover {
background: #dc2626;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}
.img-picker-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 10005;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.img-picker-overlay.show { display: flex; }
.img-picker-box {
background: var(--panel-solid, #1e2130);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px 20px;
max-width: 880px;
width: 100%;
max-height: 80vh;
display: flex;
flex-direction: column;
color: var(--text);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.img-picker-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 12px;
}
.img-picker-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.img-picker-close {
background: transparent;
border: none;
color: var(--text-dim);
font-size: 24px;
cursor: pointer;
line-height: 1;
padding: 0 6px;
}
.img-picker-close:hover { color: var(--text); }
.img-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
overflow-y: auto;
padding: 4px;
flex: 1;
min-height: 100px;
}
.img-picker-thumb {
background: var(--panel, rgba(255,255,255,0.04));
border: 2px solid var(--border, rgba(255,255,255,0.08));
border-radius: 8px;
padding: 6px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.img-picker-thumb:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.img-picker-thumb img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 4px;
background: rgba(0,0,0,0.1);
}
.img-picker-thumb span {
font-size: 11px;
color: var(--text-dim);
word-break: break-all;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.img-picker-empty {
color: var(--text-dim);
font-size: 14px;
padding: 40px 20px;
text-align: center;
}
.imglist-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 10000;
align-items: center;
justify-content: center;
}
.imglist-overlay.show { display: flex; }
.imglist-box {
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
max-width: 600px;
width: 90%;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow);
overflow: hidden;
}
.imglist-box h3 { font-size: 16px; margin-bottom: 12px; }
.imglist-box textarea {
width: 100%;
min-height: 200px;
flex: 1;
padding: 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
resize: none;
margin-bottom: 16px;
overflow: auto;
}
.imglist-actions { display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }
.dict-raw-editor {
width: 100%;
min-height: 300px;
padding: 16px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
resize: vertical;
outline: none;
tab-size: 4;
}
.dict-raw-editor:focus {
border-color: var(--accent);
}
.dict-edit-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
margin-bottom: 8px;
}
.dict-table td.row-actions button.dict-row-btn,
.dict-row-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
opacity: 1;
transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.dict-row-btn svg {
width: 14px;
height: 14px;
}
.dict-table td.row-actions button.dict-row-btn:hover:not(:disabled),
.dict-row-btn:hover:not(:disabled) {
color: var(--accent);
background: rgba(99, 102, 241, 0.08);
opacity: 1;
}
.dict-table td.row-actions button.dict-row-btn:disabled,
.dict-row-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.dict-edit-toolbar .toggle-group,
.sort-meta-editor .toggle-group,
#dictTreePanel .toggle-group,
#imgSidebar .toggle-group {
display: flex;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.dict-edit-toolbar .toggle-btn,
.sort-meta-editor .toggle-btn,
#dictTreePanel .toggle-btn,
#imgSidebar .toggle-btn {
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
font-family: inherit;
border: none;
background: none;
color: var(--text-dim);
cursor: pointer;
transition: all 0.15s;
}
.dict-edit-toolbar .toggle-btn.active,
.sort-meta-editor .toggle-btn.active,
#dictTreePanel .toggle-btn.active,
#imgSidebar .toggle-btn.active {
background: var(--accent);
color: #fff;
}
.move-select {
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 13px;
font-family: inherit;
cursor: pointer;
outline: none;
}
.img-layout {
display: flex;
gap: 24px;
min-height: 60vh;
}
.img-layout > .card {
width: 280px;
min-width: 180px;
max-width: 50%;
overflow: auto;
flex-shrink: 0;
}
.resize-handle {
width: 6px;
cursor: col-resize;
flex-shrink: 0;
position: relative;
}
.resize-handle::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 2px;
width: 2px;
border-radius: 1px;
background: var(--border);
transition: background 0.15s;
}
.resize-handle:hover::after,
.resize-handle.dragging::after {
background: var(--accent);
}
.img-layout > #imgContent {
flex: 1;
min-width: 0;
}
.img-dict-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.img-dict-item {
padding: 10px 14px;
font-size: 13px;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-dim);
transition: all var(--transition);
display: flex;
align-items: center;
gap: 6px;
}
.img-dict-item .img-dict-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.img-dict-item .img-dict-del {
background: none;
border: none;
cursor: pointer;
font-size: 12px;
padding: 2px 4px;
flex-shrink: 0;
color: var(--danger);
opacity: 0.7;
}
.img-dict-item .img-dict-del:hover { opacity: 1; }
.img-dict-item:hover {
background: rgba(255, 255, 255, 0.03);
color: var(--text);
}
.img-dict-item.active {
background: var(--accent-glow);
color: var(--accent);
}
.unused-img-panel { margin-bottom: 16px; border-radius: var(--radius); }
.unused-img-summary {
cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px;
color: var(--text); user-select: none; list-style: none;
}
.unused-img-summary::before { content: '🔍 '; }
.unused-img-summary::-webkit-details-marker { display: none; }
.unused-img-body { padding: 0 16px 16px; }
.unused-img-empty { padding: 20px; text-align: center; color: var(--success, #22c55e); font-weight: 500; }
.unused-img-info { font-size: 14px; font-weight: 600; margin: 12px 0 8px; color: var(--text); }
.unused-img-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.unused-img-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px; max-height: 500px; overflow-y: auto;
}
.unused-img-item {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px; border: 1px solid var(--border); border-radius: var(--radius);
cursor: pointer; transition: all var(--transition); position: relative;
}
.unused-img-item:hover { border-color: var(--accent); background: var(--accent-light, rgba(99,102,241,0.04)); }
.unused-img-item:has(.unused-img-cb:checked) { border-color: var(--danger, #ef4444); background: rgba(239,68,68,0.06); }
.unused-img-cb { position: absolute; top: 6px; left: 6px; }
.unused-img-thumb { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; }
.unused-img-path { font-size: 10px; color: var(--text-muted); word-break: break-all; text-align: center; line-height: 1.3; }
.unused-img-size { font-size: 10px; color: var(--text-muted); opacity: 0.7; }
.img-breadcrumbs {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
font-size: 13px;
color: var(--text-muted);
flex-wrap: wrap;
}
.img-breadcrumb-link {
color: var(--accent);
cursor: pointer;
border-radius: 4px;
padding: 2px 4px;
}
.img-breadcrumb-link:hover {
background: var(--accent-light, rgba(99,102,241,0.1));
text-decoration: underline;
}
.img-breadcrumb-current {
font-weight: 600;
color: var(--text);
}
.img-breadcrumb-sep {
opacity: 0.4;
user-select: none;
}
.img-folder-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.img-folder-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 10px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all var(--transition);
}
.img-folder-card:hover {
border-color: var(--accent);
background: var(--accent-light, rgba(99,102,241,0.06));
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.img-folder-icon {
font-size: 32px;
line-height: 1;
color: var(--accent);
}
.img-folder-icon svg { display: block; margin: 0 auto; }
.img-folder-name {
font-size: 12px;
font-weight: 500;
color: var(--text);
text-align: center;
word-break: break-word;
max-width: 100%;
}
.img-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.img-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: all var(--transition);
}
.img-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.img-card-preview {
width: 100%;
aspect-ratio: 640 / 349;
object-fit: cover;
display: block;
background: var(--bg);
cursor: zoom-in;
}
.img-card-placeholder {
width: 100%;
aspect-ratio: 640 / 349;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
color: var(--text-muted);
font-size: 40px;
}
.img-card-body {
padding: 12px;
}
.img-card-name {
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.img-card-actions {
display: flex;
gap: 6px;
}
.img-upload-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
margin-bottom: 16px;
background: var(--panel);
border: 2px dashed var(--border);
border-radius: var(--radius);
transition: border-color 0.2s, background 0.2s;
}
.img-upload-bar.dragover {
border-color: var(--accent);
background: var(--accent-glow);
}
.img-upload-bar .upload-hint {
font-size: 13px;
color: var(--text-muted);
}
.img-upload-progress {
font-size: 13px;
color: var(--text-dim);
margin-left: auto;
}
.sticky-footer {
position: sticky;
bottom: 0;
padding: 20px 8px 16px;
background: var(--bg);
display: flex;
gap: 12px;
align-items: center;
z-index: 10;
border-top: 1px solid var(--border);
margin-top: 12px;
}
.ce-popover, .ce-toolbox, .ce-conversion-toolbar, .ce-inline-toolbar, .ce-settings { z-index: 100; }
.ce-popover__container,
.ce-popover__items {
max-height: none !important;
overflow-y: visible !important;
}
.monet-schema {
border: 2px solid var(--border);
border-radius: 16px;
overflow: visible;
background: var(--bg, #f8f9fa);
position: relative;
}
.monet-schema-row {
padding: 10px 16px;
}
.monet-schema-header {
display: flex;
align-items: center;
gap: 10px;
background: var(--panel, #fff);
border-bottom: 1px solid var(--border);
padding: 12px 16px;
border-radius: 14px 14px 0 0;
}
.monet-schema > .monet-schema-row:last-child,
.monet-schema > .monet-schema-grid:last-child {
border-radius: 0 0 14px 14px;
overflow: hidden;
}
.monet-schema-logo {
font-size: 20px;
}
.monet-schema-header-btn {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--border, #e2e8f0);
}
.monet-schema-zone {
padding: 5px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.monet-schema-zone:hover {
transform: scale(1.05);
}
.monet-schema-zone-fa {
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: #fff;
box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}
.monet-schema-zone-fa:hover {
box-shadow: 0 4px 16px rgba(245,158,11,0.4);
}
.monet-schema-ab {
background: linear-gradient(135deg, #3bbceb 0%, #1565C0 100%);
color: #fff;
font-size: 12px;
font-weight: 600;
text-align: center;
cursor: pointer;
border-bottom: 1px solid var(--border);
padding: 8px 16px;
transition: opacity 0.15s;
}
.monet-schema-ab:hover {
opacity: 0.85;
}
.monet-schema-ab2 {
background: linear-gradient(135deg, #3bbceb 0%, #1565C0 100%);
color: #fff;
font-size: 12px;
font-weight: 600;
text-align: center;
cursor: pointer;
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
padding: 8px 16px;
transition: opacity 0.15s;
}
.monet-schema-ab2:hover {
opacity: 0.85;
}
.monet-schema-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 20px 16px 60px;
}
.monet-schema-card {
aspect-ratio: 1/1;
background: var(--panel, #fff);
border: 1.5px solid var(--border);
border-radius: 10px;
}
.monet-schema-overlay {
position: absolute;
bottom: 50%;
left: 0;
right: 0;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16px;
pointer-events: none;
}
.monet-schema-popup {
background: var(--panel, #fff);
border: 2px dashed var(--accent, #8b5cf6);
border-radius: 14px;
padding: 20px 28px;
font-size: 13px;
font-weight: 600;
color: var(--text);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
cursor: pointer;
pointer-events: auto;
transition: transform 0.15s, box-shadow 0.15s;
}
.monet-schema-popup:hover {
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.unsaved-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--warning);
display: none;
}
.le-container { display: flex; gap: 20px; min-height: 500px; }
.le-sidebar { width: 280px; min-width: 180px; max-width: calc(100% - 80px); flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.le-sidebar-item { padding: 10px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; border: 1px solid transparent; transition: all var(--transition); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.le-sidebar-item { cursor: grab; }
.le-sidebar-item:hover { background: rgba(99,102,241,0.08); border-color: var(--border); }
.le-sidebar-item.active { background: rgba(99,102,241,0.12); border-color: var(--accent); font-weight: 600; }
.le-sidebar-item .drag-handle { color: var(--text-dim); margin-right: 6px; font-size: 14px; opacity: 0.4; transition: opacity var(--transition); }
.le-sidebar-item:hover .drag-handle { opacity: 1; }
.le-sidebar-item.dragging { opacity: 0.3; transform: scale(0.97); }
.le-sidebar-item.drop-above { position: relative; }
.le-sidebar-item.drop-below { position: relative; }
.le-sidebar-item.drop-above::before { content: ''; position: absolute; top: -1px; left: 8px; right: 8px; height: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; }
.le-sidebar-item.drop-below::after { content: ''; position: absolute; bottom: -1px; left: 8px; right: 8px; height: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; }
.le-level-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-dim); border-radius: var(--radius-sm); transition: background var(--transition); user-select: none; }
.le-level-header:hover { background: rgba(99,102,241,0.06); }
.le-level-header .arrow { font-size: 10px; transition: transform 0.2s; display: inline-block; }
.le-level-header.open .arrow { transform: rotate(90deg); }
.le-level-header .badge { font-size: 11px; background: var(--bg); padding: 1px 7px; border-radius: 10px; color: var(--text-muted); margin-left: auto; }
.le-level-files { display: none; padding-left: 8px; }
.le-level-header.open+.le-level-files { display: block; }
.le-level-header.drop-target { background: rgba(99,102,241,0.15); outline: 2px dashed var(--accent); outline-offset: -2px; }
.le-main { flex: 1; min-width: 0; }
.le-section { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.le-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 12px; }
.le-field { margin-bottom: 12px; }
.le-field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; font-weight: 500; }
.le-field input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font-size: 14px; font-family: inherit; box-sizing: border-box; }
.le-field input:focus { outline: none; border-color: var(--accent); }
.le-field select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font-size: 14px; font-family: inherit; box-sizing: border-box; }
.le-field select:focus { outline: none; border-color: var(--accent); }
.le-lang-tabs { display: flex; gap: 4px; margin-bottom: 16px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 4px; flex-wrap: wrap; }
.le-lang-tab { padding: 8px 14px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; border: none; background: transparent; color: var(--text-dim); transition: background 0.15s, color 0.15s, box-shadow 0.15s; letter-spacing: 0.3px; }
.le-lang-tab:hover { background: var(--border); color: var(--text); }
.le-lang-tab.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.le-lang-warn { color: #ef4444; font-size: 10px; font-weight: 800; vertical-align: super; line-height: 1; }
.le-lang-tab.active .le-lang-warn { color: #fecaca; }
.le-ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent))); border: none; border-radius: 6px; color: var(--accent-text, #fff); cursor: pointer; font-size: 12px; font-weight: 600; transition: all var(--transition); }
.le-ai-btn:hover { transform: scale(1.02); box-shadow: 0 2px 10px var(--accent-glow, rgba(0,0,0,0.15)); }
.le-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ai-translate-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; }
.ai-tg-label { justify-self: end; }
.ai-tg-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-tg-modes { display: flex; gap: 4px; flex-wrap: wrap; justify-self: end; }
.le-ai-targets { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.le-ai-targets .le-ai-sep { color: var(--text-muted, #555); margin: 0 2px; user-select: none; }
.le-ai-chip { padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--panel-solid, var(--bg2, var(--bg))); color: var(--text-dim, var(--text)); cursor: pointer; font-size: 11px; font-weight: 600; transition: all var(--transition); white-space: nowrap; }
.le-ai-chip:hover { border-color: var(--accent); color: var(--text); background: var(--bg2, var(--bg)); }
.le-ai-chip.active { border-color: var(--accent); background: var(--accent-glow, rgba(0,0,0,0.08)); color: var(--accent); }
.le-ai-chip.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.dn-chips-row { gap: 3px !important; }
.dn-chips-row .le-ai-chip { padding: 3px 6px; }
.le-ai-btn .spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; opacity: 0.7; border-radius: 50%; animation: aispin 0.6s linear infinite; }
@keyframes aispin { to { transform: rotate(360deg); } }
.ai-img-slot { position: relative; width: 92px; height: 92px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel) center/cover no-repeat; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dim); outline: none; flex: 0 0 auto; transition: border-color var(--transition), box-shadow var(--transition); }
.ai-img-slot.empty { border-style: dashed; }
.ai-img-slot:hover { border-color: var(--accent); }
.ai-img-slot:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ai-img-slot-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #ef4444; color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ai-img-slot-remove:hover { background: #dc2626; }
.ai-img-addslot { width: 92px; height: 92px; border-radius: 8px; border: 1px dashed var(--accent); background: transparent; color: var(--accent); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; font-size: 11px; font-weight: 600; transition: background var(--transition); }
.ai-img-addslot:hover { background: var(--accent-glow, rgba(99,102,241,0.12)); }
.ai-img-addslot span { line-height: 1.1; text-align: center; }
.le-ai-progress { margin: 8px 0; }
.le-ai-progress-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.le-ai-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover, var(--accent))); border-radius: 3px; transition: width 0.4s ease; }
.le-ai-progress-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ai-prog-box { color: var(--text); }
.ai-prog-source { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: var(--text); padding: 6px 0; }
.ai-prog-source .ai-prog-flag-img img { vertical-align: middle; border-radius: 2px; }
.ai-prog-arrow { display: flex; justify-content: center; color: var(--text-muted); padding: 4px 0 8px 0; }
.ai-prog-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; padding: 4px 4px 4px; }
.ai-prog-flag { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 2px solid var(--border); border-radius: 8px; transition: border-color .3s ease, opacity .3s ease, box-shadow .3s ease, transform .3s ease; opacity: .45; background: var(--bg); }
.ai-prog-flag .ai-prog-flag-img { display: flex; }
.ai-prog-flag img { width: 32px; height: 24px; border-radius: 2px; display: block; }
.ai-prog-flag-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.4px; }
.ai-prog-flag[data-state="pending"] { border-style: dashed; }
.ai-prog-flag[data-state="in-progress"] { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow, rgba(0,0,0,0.15)); transform: scale(1.04); }
.ai-prog-flag[data-state="done"] { opacity: 1; border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.ai-prog-flag[data-state="error"] { opacity: 1; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.ai-prog-flag[data-state="cancelled"] { opacity: .6; border-color: #94a3b8; border-style: dashed; }
.ai-prog-flag-badge { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--panel-solid, #fff); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.ai-prog-flag-badge svg { width: 14px; height: 14px; display: block; }
@keyframes ai-prog-spin { to { transform: rotate(360deg); } }
.ai-prog-flag-badge.is-spin svg { animation: ai-prog-spin 0.7s linear infinite; }
.ai-prog-result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; color: var(--text); }
.ai-prog-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.ai-prog-gen-targets { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ai-prog-gen-cell .ai-prog-flag-img { color: var(--accent); }
.ai-prog-gen-cell .ai-prog-flag-img svg { width: 26px; height: 26px; display: block; }
.ai-prog-gen-cell .ai-prog-flag-label { text-align: center; line-height: 1.15; padding: 0 2px; letter-spacing: 0.2px; }
.le-dict-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; border-radius: var(--radius-sm); background: var(--bg); margin-bottom: 6px; }
.le-dict-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-dict-item .remove-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.le-dict-item .remove-btn:hover { color: var(--danger); }
.le-dict-mode-sel { padding: 4px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-family: inherit; flex-shrink: 0; }
.le-dict-pick-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 12px 0 6px; }
.le-dict-pick-empty { font-size: 12px; color: var(--text-muted); padding: 8px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.le-dict-search { margin: 8px 0; }
.le-dict-pick { display: block; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.le-dict-cat { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; margin-bottom: 4px; }
.le-dict-cat:last-child { margin-bottom: 0; }
.le-dict-cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text); user-select: none; }
.le-dict-cat > summary::-webkit-details-marker { display: none; }
.le-dict-cat > summary::before { content: ''; width: 6px; height: 6px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform .15s; flex: 0 0 auto; }
.le-dict-cat[open] > summary::before { transform: rotate(45deg); }
.le-dict-cat-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 10px; background: var(--accent, #6366f1); color: #fff; font-size: 11px; font-weight: 700; }
.le-dict-cat-count { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.le-dict-cat-items { display: flex; flex-direction: column; padding: 4px; gap: 2px; border-top: 1px solid var(--border); }
.le-dict-pick-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; color: var(--text); border-radius: var(--radius-sm); cursor: pointer; transition: background .12s, color .12s; }
.le-dict-pick-item svg { color: var(--text-muted); flex: 0 0 auto; }
.le-dict-pick-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-dict-pick-item:hover { background: var(--accent-glow, rgba(99,102,241,0.12)); color: var(--accent, #6366f1); }
.le-dict-pick-item:hover svg { color: var(--accent, #6366f1); }
@media (max-width: 768px) { .le-container { flex-direction: column; } .le-sidebar { width: 100% !important; flex-direction: row; overflow-x: auto; max-height: unset; } .le-container > .resize-handle { display: none; } }
.teacher-form-modal {
max-width: 900px;
width: 90%;
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 16px;
background: var(--panel-solid);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.teacher-form-header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 16px 24px;
background: var(--bg);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.teacher-form-header-name {
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 700;
}
.teacher-form-close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
background: var(--panel);
color: var(--text-dim);
border-radius: 10px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s, transform 0.15s;
}
.teacher-form-close:hover {
background: var(--border);
color: var(--text);
transform: translateY(-50%) scale(1.1);
}
.teacher-form-body {
flex: 1;
overflow-y: auto;
padding: 24px 28px;
scrollbar-color: var(--border) transparent;
}
.teacher-form-body::-webkit-scrollbar { width: 6px; }
.teacher-form-body::-webkit-scrollbar-track { background: transparent; }
.teacher-form-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.teacher-form-section {
border: 1px dashed var(--border);
border-radius: 14px;
padding: 20px;
margin-bottom: 16px;
}
.teacher-form-section-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 14px;
}
.mp-section {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px;
margin-bottom: 16px;
}
.mp-section-title {
font-size: 13px;
font-weight: 600;
color: var(--text-muted, #888);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 14px;
}
.teacher-form-footer {
padding: 14px 28px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 10px;
flex-shrink: 0;
}
@media (max-width: 600px) {
.teacher-form-modal { max-width: 100%; width: 100%; max-height: 100vh; border-radius: 0; }
.teacher-form-body { padding: 16px; }
.teacher-form-grid-2 { grid-template-columns: 1fr !important; }
}
.stats-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 16px;
}
.stats-grid > .stat-card {
flex: 1 1 220px;
min-width: 0;
}
.stat-card {
background: var(--panel);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
display: flex;
align-items: center;
gap: 16px;
transition: all var(--transition);
box-shadow: var(--shadow);
}
.stat-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
}
.stat-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
color: #fff;
}
.stat-content {
min-width: 0;
}
.stat-icon svg {
width: 24px;
height: 24px;
}
.stat-icon--blue { background: linear-gradient(135deg, #3b82f6, #60a5fa); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
.stat-icon--green { background: linear-gradient(135deg, #22c55e, #4ade80); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }
.stat-icon--red { background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.stat-icon--purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.stat-icon--amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
.stat-icon--teal { background: linear-gradient(135deg, #14b8a6, #2dd4bf); box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3); }
.stat-icon--pink { background: linear-gradient(135deg, #ec4899, #f472b6); box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3); }
.stat-icon--slate { background: linear-gradient(135deg, #64748b, #94a3b8); box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3); }
.stat-value {
font-size: 24px;
font-weight: 800;
color: var(--text);
line-height: 1.2;
white-space: nowrap;
}
.stat-unit {
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
}
.stat-label {
font-size: 13px;
color: var(--text-dim);
margin-top: 4px;
}
.stats-table-wrap {
overflow-x: auto;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.stats-table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.stats-table-wrap::-webkit-scrollbar-track { background: transparent; }
.stats-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.stats-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #888); }
.dash-chart-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
transition: border-color var(--transition);
color: var(--text);
}
.dash-chart-card h3 { color: var(--text); }
.dash-chart-card table { color: var(--text-dim); }
.dash-chart-card strong { color: var(--text); }
.dash-chart-card a { color: var(--accent); text-decoration: none; }
.dash-chart-card a:hover { text-decoration: underline; }
.dash-chart-card:hover { border-color: var(--border-hover); }
@media (max-width: 900px) {
.dash-chart-card { padding: 16px; }
div[style*="grid-template-columns: 1fr 1fr"],
div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(calc(-100% - 10px));
left: 0;
top: 0;
bottom: 0;
border-radius: 0 28px 28px 0;
}
.sidebar.open {
transform: translateX(0);
}
.sidebar-logo {
padding-top: 48px;
}
.sidebar-overlay.show {
display: block;
}
.burger {
display: block;
}
#sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-expand-btn,
.sidebar-expand-btn {
display: none !important;
}
.main {
margin-left: 0 !important;
}
.main-header {
padding: 12px 12px 12px 52px;
min-height: 45px;
margin: 0 4px 4px !important;
top: 4px;
border-radius: 14px;
}
.main-body {
padding: 16px;
}
.dict-layout,
.img-layout {
flex-direction: column;
}
.dict-layout > .card:first-child,
.img-layout > .card {
width: 100% !important;
max-width: 100%;
}
.resize-handle { display: none; }
#sidebarResizeHandle { display: none; }
.img-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.dash-chart-card {
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
}
}
.admin-theme-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
min-width: 110px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text);
transition: all var(--transition);
white-space: nowrap;
}
.admin-theme-btn:hover {
border-color: var(--border-hover);
background: var(--btn);
}
body.admin-theme-default .admin-theme-btn {
color: #1a1a1a !important;
}
.admin-lang-select {
position: relative;
}
.admin-lang-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition);
min-width: 90px;
}
.admin-lang-btn:hover {
border-color: var(--border-hover);
}
.admin-lang-flag {
width: 24px;
height: 16px;
object-fit: cover;
border-radius: 2px;
}
.admin-lang-code {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.admin-lang-arrow {
font-size: 10px;
color: var(--text-muted);
margin-left: auto;
transition: transform 0.2s;
}
.admin-lang-select.open .admin-lang-arrow {
transform: rotate(180deg);
}
.admin-lang-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
right: 0;
background: var(--panel-solid);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
z-index: 1000;
min-width: 100%;
overflow: hidden;
}
.admin-lang-select.open .admin-lang-dropdown {
display: block;
}
.admin-lang-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--text);
cursor: pointer;
transition: background 0.15s;
}
.admin-lang-option:hover {
background: var(--accent-glow);
}
body.admin-theme-default .admin-lang-option:hover {
background: #ffe00f;
color: #1a1a1a;
}
.admin-lang-option.active {
background: var(--accent-glow);
color: var(--accent);
}
body.admin-theme-default .admin-lang-option.active {
background: #ffe00f;
color: #1a1a1a;
}
.admin-lang-option img {
width: 24px;
height: 16px;
object-fit: cover;
border-radius: 2px;
}
.sch-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.sch-nav-btn { background:var(--bg-muted,#f3f4f6); border:1px solid var(--border); border-radius:8px; padding:6px 14px; cursor:pointer; font-size:13px; color:var(--text); }
.sch-nav-btn:hover { background:var(--accent,#6366f1); color:#fff; }
.sch-nav-title { font-weight:700; font-size:15px; }
.sch-tabs { display:flex; gap:8px; margin-bottom:16px; }
.sch-act-btn { font-size:13px; padding:4px 10px; color:#fff; border:none; border-radius:6px; cursor:pointer; line-height:1.2; flex-shrink:0; }
.sch-act-btn:hover { opacity:0.85; }
@media(max-width:600px) {
#scheduleOverlay > div { max-height:95vh; } #scheduleContent { padding:12px !important; }
#scheduleOverlay .dict-table th, #scheduleOverlay .dict-table td { padding:6px 4px; font-size:12px; }
#scheduleOverlay .dict-table th:nth-child(3), #scheduleOverlay .dict-table td:nth-child(3) { display:none; }
.sch-act-btn { padding:4px 8px; font-size:12px; }
}
.hw-section { max-height:250px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:8px; }
.hw-folder-hdr { font-weight:600; font-size:13px; color:var(--text-muted); margin:8px 0 4px; padding-left:2px; }
.hw-folder-hdr:first-child { margin-top:0; }
.hw-dict-item { padding:3px 0; }
.hw-dict-item label { cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px; }
.hw-modes { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 4px 24px; }
.hw-mode-pill { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; font-size:11px; border-radius:12px; background:var(--bg); border:1px solid var(--border); cursor:pointer; transition:all .15s; }
.hw-mode-pill:has(:checked) { background:var(--accent,#6366f1); color:#fff; border-color:var(--accent,#6366f1); }
.hw-mode-pill input { display:none; }
.hw-lesson-item { padding:3px 0; }
.hw-lesson-item label { cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px; }
@media(max-width:600px) {
#homeworkContent { padding:12px !important; }
.hw-section { max-height:200px; }
}
.sch-tab { padding:8px 16px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--bg); color:var(--text); }
.sch-tab.active { background:var(--accent,#6366f1); color:#fff; border-color:var(--accent,#6366f1); }
.sch-grid { display:grid; grid-template-columns:56px repeat(7,1fr); border:1px solid var(--border); border-radius:8px; overflow:hidden; font-size:12px; }
.sch-time-label { padding:2px 6px; text-align:right; color:var(--text-muted); font-size:11px; border-bottom:1px solid var(--border); background:var(--bg-muted,#f9fafb); display:flex; align-items:flex-start; justify-content:flex-end; min-height:28px; }
.sch-day-header { text-align:center; padding:8px 4px; font-weight:700; font-size:12px; border-bottom:1px solid var(--border); border-left:1px solid var(--border); background:var(--bg-muted,#f9fafb); }
.sch-day-header.sch-today { background:var(--accent,#6366f1); color:#fff; border-radius:0; }
.sch-day-col { position:relative; border-left:1px solid var(--border); border-bottom:1px solid var(--border); min-height:28px; cursor:pointer; }
.sch-day-col:hover { background:rgba(99,102,241,0.04); }
.sch-block { position:absolute; left:2px; right:2px; border-radius:5px; padding:2px 5px; font-size:11px; color:#fff; overflow:hidden; cursor:pointer; z-index:2; box-shadow:0 1px 3px rgba(0,0,0,0.15); line-height:1.3; }
.sch-block:hover { opacity:0.9; box-shadow:0 2px 6px rgba(0,0,0,0.25); }
.sch-block .sch-block-name { font-weight:700; white-space:normal; word-break:break-word; overflow:hidden; line-height:1.15; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.sch-block .sch-block-time { font-size:10px; opacity:0.85; }
.sch-popup { position:fixed; background:var(--panel-solid,#fff); border:1px solid var(--border); border-radius:10px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:10001; min-width:260px; max-width:340px; }
.sch-popup h4 { margin:0 0 10px; font-size:14px; }
.sch-popup .sch-popup-close { position:absolute; top:8px; right:10px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-muted); }
.sch-month-load-strip { display:flex; gap:6px; margin-bottom:4px; }
.sch-month-load-day { flex:1; text-align:center; padding:8px 4px; background:var(--bg-muted,#f3f4f6); border-radius:8px; border:1px solid var(--border); }
.sch-month-load-name { font-size:11px; font-weight:700; color:var(--text-muted); margin-bottom:6px; }
.sch-month-load-bar { width:80%; height:5px; border-radius:3px; background:var(--border); overflow:hidden; margin:0 auto 4px; }
.sch-month-load-fill { height:100%; border-radius:3px; transition:width .3s; }
.sch-month-load-info { font-size:10px; font-weight:700; color:var(--text-muted); line-height:1; }
@media(max-width:600px) { .sch-month-load-strip { gap:3px; } .sch-month-load-day { padding:6px 2px; } .sch-month-load-name { font-size:10px; } }
.sch-student-colors { --sc0:#6366f1; --sc1:#0ea5e9; --sc2:#8b5cf6; --sc3:#f59e0b; --sc4:#10b981; --sc5:#ef4444; --sc6:#ec4899; --sc7:#14b8a6; }
.sch-timeline { position:relative; height:72px; background:var(--bg-muted,#f3f4f6); border-radius:8px; border:1px solid var(--border); overflow:hidden; margin-top:8px; }
.sch-timeline-block { position:absolute; top:18px; height:44px; border-radius:4px; display:flex; align-items:center; padding:2px 4px; overflow:hidden; z-index:2; cursor:default; }
.sch-timeline-block span { color:#fff; font-size:10px; font-weight:600; line-height:1.15; white-space:normal; overflow:hidden; word-break:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.sch-timeline-hour { position:absolute; top:0; height:100%; border-left:1px solid var(--border); z-index:1; }
.sch-timeline-hour span { position:absolute; top:1px; left:2px; font-size:9px; color:var(--text-muted); }
.sch-timeline-sel { position:absolute; top:18px; height:44px; border-radius:4px; z-index:3; border:2px dashed; }
.sch-timeline-sel.conflict { background:rgba(239,68,68,0.25); border-color:#ef4444; }
.sch-timeline-sel.ok { background:rgba(99,102,241,0.15); border-color:#6366f1; }
.sch-timeline-label { font-size:11px; font-weight:600; margin-top:4px; color:var(--text-muted); }
.sch-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sch-cal-nav-btn { background:none; border:1px solid var(--border); border-radius:6px; padding:4px 12px; cursor:pointer; font-size:18px; color:var(--text); line-height:1; }
.sch-cal-nav-btn:hover { background:var(--accent,#6366f1); color:#fff; border-color:var(--accent,#6366f1); }
.sch-cal-nav-title { font-weight:700; font-size:14px; }
.sch-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:10px; }
.sch-cal-header { background:var(--bg-muted,#f3f4f6); text-align:center; font-size:11px; font-weight:700; padding:6px 2px; color:var(--text-muted); }
.sch-cal-cell { background:var(--bg); text-align:center; padding:3px 2px; min-height:48px; cursor:pointer; position:relative; font-size:13px; transition:background .15s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.sch-cal-cell:hover { background:rgba(99,102,241,0.08); }
.sch-cal-cell.other-month { color:var(--text-muted); opacity:0.35; cursor:default; pointer-events:none; }
.sch-cal-cell.past { color:var(--text-muted); opacity:0.45; cursor:not-allowed; pointer-events:none; background:repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,0.04) 6px 7px); }
.sch-cal-cell.today { background:rgba(99,102,241,0.12); box-shadow:inset 0 0 0 2px var(--accent,#6366f1); border-radius:6px; }
.sch-cal-cell.today .sch-cal-day { background:var(--accent,#6366f1); color:#fff; border-radius:50%; min-width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; line-height:1; padding:0 4px; box-shadow:0 2px 8px rgba(99,102,241,0.45); }
.sch-cal-cell.selected { background:rgba(99,102,241,0.15); }
.sch-cal-cell.selected .sch-cal-day { font-weight:700; color:var(--accent,#6366f1); }
.sch-cal-cell.selected.today .sch-cal-day { color:#fff; }
.sch-cal-cell.conflict { background:rgba(239,68,68,0.12); }
.sch-cal-bar { width:80%; height:4px; border-radius:2px; background:var(--border); overflow:hidden; }
.sch-cal-bar-fill { height:100%; border-radius:2px; transition:width .2s; }
.sch-cal-count { font-size:9px; font-weight:700; color:var(--text-muted); line-height:1; }
.sch-cal-selection { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-muted); margin-bottom:10px; min-height:22px; }
.sch-day-entries-wrap { margin-bottom:10px; max-height:240px; overflow-y:auto; padding:10px; background:rgba(99,102,241,0.05); border:1px solid var(--border); border-radius:8px; }
.sch-day-entries-header { font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.3px; }
.sch-day-entry { display:grid; grid-template-columns:130px 1fr 100px 80px 30px; gap:6px; align-items:center; margin-bottom:6px; }
.sch-day-entry:last-child { margin-bottom:0; }
.sch-day-entry-date { font-size:12px; font-weight:600; color:var(--text); background:rgba(99,102,241,0.12); padding:8px 10px; border-radius:6px; text-align:center; white-space:nowrap; text-transform:capitalize; }
.sch-day-entry .input { height:36px; padding:6px 8px; font-size:13px; }
.sch-day-entry-remove { background:none; border:1px solid var(--border); border-radius:6px; width:30px; height:30px; cursor:pointer; color:var(--danger); font-size:18px; line-height:1; padding:0; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.sch-day-entry-remove:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
@media(max-width:600px) {
.sch-cal-cell { min-height:38px; font-size:11px; padding:2px 1px; }
.sch-cal-header { font-size:10px; padding:4px 1px; }
.sch-cal-bar { width:90%; }
.sch-day-entry { grid-template-columns:1fr 90px 70px 30px; gap:4px; }
.sch-day-entry-date { grid-column:1 / -1; margin-bottom:2px; font-size:11px; padding:5px 8px; }
}
.msg-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #ef4444;
color: #fff;
font-size: 11px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
padding: 0 5px;
margin-left: 6px;
line-height: 1;
}
.msg-badge--muted {
background: #94a3b8;
}
.msg-tab-bar {
display: flex;
gap: 4px;
padding: 8px 12px 0;
border: 1px solid var(--border);
border-bottom: none;
border-radius: 12px 12px 0 0;
background: var(--card-bg);
flex-shrink: 0;
}
.msg-tab-bar + .msg-layout {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: none;
}
.msg-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 14px;
font-weight: 500;
color: var(--text-dim, #94a3b8);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: color .15s, background .15s, border-color .15s;
border-radius: 6px 6px 0 0;
}
.msg-tab:hover {
color: var(--text);
background: rgba(99, 102, 241, .08);
}
.msg-tab.active {
color: var(--accent, #6366f1);
border-bottom-color: var(--accent, #6366f1);
background: rgba(99, 102, 241, .10);
}
@media (max-width: 640px) {
.msg-tab { padding: 6px 10px; font-size: 13px; }
.msg-tab svg { width: 14px; height: 14px; }
}
.msg-layout {
display: flex;
gap: 0;
height: calc(100vh - 140px);
min-height: 400px;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--card-bg);
}
.msg-student-list {
width: 250px;
min-width: 200px;
border-right: 1px solid var(--border);
overflow-y: auto;
flex-shrink: 0;
}
.msg-student-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background .15s;
font-size: 14px;
}
.msg-student-item:hover { background: var(--hover-bg, rgba(99,102,241,.06)); }
.msg-student-item.active { background: var(--hover-bg, rgba(99,102,241,.1)); font-weight: 600; }
.msg-student-item .msg-unread-dot {
background: #ef4444;
color: #fff;
font-size: 11px;
font-weight: 700;
min-width: 20px;
height: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
}
.msg-online-tag {
color: #22c55e;
font-size: 12px;
font-weight: 600;
}
.msg-conversation {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.msg-conv-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-weight: 600;
font-size: 15px;
}
.msg-thread {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
scroll-behavior: smooth;
}
.msg-bubble {
max-width: 75%;
padding: 10px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.45;
word-wrap: break-word;
overflow-wrap: break-word;
}
.msg-bubble p { margin: 0 0 4px; }
.msg-bubble p:last-child { margin: 0; }
.msg-bubble.sent {
align-self: flex-end;
background: var(--accent, #6366f1);
color: #fff;
border-bottom-right-radius: 4px;
}
.msg-bubble.received {
align-self: flex-start;
background: var(--panel-solid, #f1f5f9);
color: var(--text);
border: 1px solid var(--border);
border-bottom-left-radius: 4px;
}
.msg-time {
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
}
.msg-time.sent { text-align: right; }
.msg-time.received { text-align: left; }
.msg-status-read { color: #22c55e; }
.msg-status-sent { color: var(--text-muted); }
.msg-date-sep {
text-align: center;
font-size: 12px;
color: var(--text-muted);
margin: 10px 0;
font-weight: 600;
}
.msg-compose {
padding: 8px 16px;
display: flex;
gap: 8px;
align-items: flex-end;
flex-shrink: 0;
}
.msg-compose textarea {
flex: 1;
resize: none;
border: 1px solid var(--border, #e2e8f0);
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
font-family: inherit;
background: var(--panel, #fff);
color: var(--text, #1e293b);
min-height: 42px;
max-height: 120px;
outline: none;
transition: border-color .2s;
}
.msg-compose textarea:focus { border-color: var(--accent, #6366f1); }
.msg-resize-handle {
height: 6px;
cursor: row-resize;
flex-shrink: 0;
position: relative;
}
.msg-resize-handle::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 2px;
height: 2px;
border-radius: 1px;
background: var(--border);
}
.msg-resize-handle:hover::after,
.msg-resize-handle.dragging::after {
background: var(--accent);
}
.msg-compose-btn {
background: var(--accent, #6366f1);
color: #fff;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
align-self: flex-end;
transition: opacity .2s;
}
.msg-compose-btn:hover { opacity: .85; }
.msg-compose-btn:disabled { opacity: .5; cursor: not-allowed; }
.msg-empty-state {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 15px;
}
.msg-load-more {
text-align: center;
margin-bottom: 8px;
}
.msg-load-more button {
background: none;
border: 1px solid var(--border);
border-radius: 8px;
padding: 5px 14px;
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
}
.msg-load-more button:hover { background: var(--hover-bg); }
@media (max-width: 768px) {
.msg-layout { flex-direction: column; height: auto; }
.msg-student-list { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 200px; }
.msg-conversation { min-height: 400px; }
}
.diag-tip {
cursor: pointer;
}
.diag-tooltip-float {
position: fixed;
z-index: 9999;
background: var(--panel-solid, #1e2130);
color: var(--text, #fff);
border: 1px solid var(--border, #333);
border-radius: 8px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
max-width: 340px;
min-width: 200px;
white-space: normal;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
font-weight: 400;
font-family: Inter, sans-serif;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
.diag-tooltip-float.visible {
opacity: 1;
}
.le-emoji-picker {
position: fixed;
z-index: 100;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
padding: 8px;
flex-wrap: wrap;
gap: 2px;
max-width: 420px;
max-height: 300px;
overflow-y: auto;
margin-top: 4px;
}
.le-emoji-item {
font-size: 22px;
cursor: pointer;
padding: 4px;
border-radius: 6px;
line-height: 1;
transition: background 0.15s;
}
.le-emoji-item:hover {
background: var(--bg-hover, rgba(0,0,0,0.06));
}
.ej-pagebreak {
margin: 8px 0;
position: relative;
}
.ej-pagebreak-line {
display: flex;
align-items: center;
gap: 8px;
text-align: center;
}
.ej-pagebreak-line::before,
.ej-pagebreak-line::after {
content: '';
flex: 1;
border-top: 2px dashed var(--accent, #6366f1);
opacity: 0.4;
}
.ej-pagebreak-label {
font-size: 12px;
font-weight: 600;
color: var(--accent, #6366f1);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.5px;
}
body.admin-theme-default .ej-pagebreak-label {
color: #a07800;
}
body.admin-theme-default .ej-pagebreak-line::before,
body.admin-theme-default .ej-pagebreak-line::after {
border-color: #a07800;
}
.ce-popover-item__title {
white-space: normal !important;
overflow: visible !important;
line-height: 1.3;
}
.ce-toolbox .ce-popover-item__title {
white-space: nowrap !important;
overflow: hidden !important;
line-height: unset;
}
.ej-editor-area {
min-height: 400px;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 20px;
background: var(--bg);
}
.ej-editor-area .codex-editor {
font-family: Inter, sans-serif;
}
.codex-editor {
z-index: auto !important;
}
.codex-editor .ce-toolbar {
z-index: 20;
}
.ej-editor-area .codex-editor__redactor {
padding-right: 22px !important;
}
.ej-editor-area .ce-block__content,
.ce-block__content {
max-width: 100%;
}
.ej-editor-area .ce-block {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border, #e5e7eb);
overflow: visible;
}
.ej-editor-area .ce-block:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ej-editor-area .ce-toolbar__content,
.ce-toolbar__content {
max-width: 100%;
}
.ej-block-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
}
.ej-block-del-btn {
position: absolute;
right: -13px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--danger, #ef4444);
border: none;
color: #fff;
font-size: 11px;
line-height: 1;
cursor: pointer;
opacity: 0.85;
transition: opacity 0.15s;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.ej-block-del-btn:hover {
opacity: 1;
}
.ej-block-up-btn,
.ej-block-down-btn {
position: absolute;
right: -13px;
transform: translateY(-50%);
z-index: 5;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--panel-solid, #fff);
border: 1px solid var(--border);
color: var(--text, #334155);
cursor: pointer;
opacity: 0.85;
transition: opacity 0.15s, background 0.15s;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.ej-block-up-btn   { top: calc(50% - 28px); }
.ej-block-down-btn { top: calc(50% + 28px); }
.ej-block-up-btn:hover,
.ej-block-down-btn:hover {
opacity: 1;
background: var(--accent-glow, rgba(59,188,235,0.15));
}
.ej-block-translate-btn {
position: absolute;
right: -42px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--panel-solid, #fff);
border: 1px solid var(--border);
cursor: pointer;
opacity: 0.75;
transition: opacity 0.15s, background 0.15s;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 14px;
line-height: 1;
}
.ej-block-translate-btn:hover {
opacity: 1;
background: var(--accent-glow, rgba(59,188,235,0.15));
}
.ej-block-translate-btn:disabled {
opacity: 0.4;
cursor: wait;
}
.ej-block-generate-btn {
position: absolute;
right: -42px;
top: calc(50% - 30px);
transform: translateY(-50%);
z-index: 5;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--panel-solid, #fff);
border: 1px solid var(--border);
color: var(--accent, #6366f1);
cursor: pointer;
opacity: 0.75;
transition: opacity 0.15s, background 0.15s;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.ej-block-generate-btn:hover {
opacity: 1;
background: var(--accent-glow, rgba(59,188,235,0.15));
}
.ej-block-generate-btn:disabled {
opacity: 0.4;
cursor: wait;
}
.gen-prev-body {
background: var(--panel-solid, #fff);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
max-height: 440px;
overflow: auto;
font-size: 13px;
color: var(--text);
line-height: 1.5;
}
.gen-prev-body .gen-prev-tip {
background: var(--accent-glow, rgba(99,102,241,0.10));
border-left: 3px solid var(--accent, #6366f1);
border-radius: 6px;
padding: 8px 10px;
}
.gen-prev-body .gen-prev-instr { font-weight: 600; margin-bottom: 6px; }
.gen-prev-body .gen-prev-meta { color: var(--text-dim); margin-top: 6px; }
.gen-prev-body .gen-prev-list { margin: 0; padding-left: 18px; }
.gen-prev-body .gen-prev-list li { margin: 3px 0; }
.gen-prev-body .gen-prev-correct { color: var(--accent, #22c55e); font-weight: 600; }
.gen-prev-body .gen-prev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gen-prev-body .gen-prev-chip {
display: inline-block;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 3px 8px;
font-size: 12px;
}
.gen-prev-body .gen-prev-table { width: 100%; border-collapse: collapse; }
.gen-prev-body .gen-prev-table th,
.gen-prev-body .gen-prev-table td {
border: 1px solid var(--border);
padding: 5px 8px;
text-align: left;
font-size: 12px;
}
.gen-prev-body .gen-prev-table th { background: var(--bg); font-weight: 600; }
.gen-prev-body .gen-prev-json {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
font-size: 11px;
color: var(--text-dim);
}
.ej-input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text);
font-size: 14px;
font-family: Inter, sans-serif;
box-sizing: border-box;
}
.ej-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
.ej-input-sm {
padding: 6px 10px;
font-size: 13px;
}
.ej-field {
flex: 1;
min-width: 0;
}
.ej-field label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.ej-row {
display: flex;
gap: 10px;
align-items: flex-end;
margin-bottom: 8px;
}
.ej-btn {
padding: 8px 16px;
border: none;
border-radius: var(--radius-sm);
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: Inter, sans-serif;
}
.ej-btn:hover { opacity: 0.85; }
.ej-btn-sm {
padding: 5px 12px;
font-size: 12px;
}
.ej-btn-icon {
width: 24px;
height: 24px;
border: none;
border-radius: 50%;
background: transparent;
color: var(--text);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ej-btn-icon:hover { opacity: 0.7; }
.ej-btn-danger { color: var(--danger, #ef4444); background: transparent; }
.ej-btn-danger:hover { opacity: 0.5; }
.ej-tts-btn {
font-size: 18px;
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius-sm);
flex-shrink: 0;
color: var(--text, #1e293b);
display: inline-flex;
align-items: center;
justify-content: center;
}
.ej-tts-btn svg { width: 18px; height: 18px; }
.ej-tts-btn:hover { background: var(--bg-hover, #f0f0f0); }
.ej-paragraph {
min-height: 24px;
outline: none;
line-height: 1.6;
}
.ej-paragraph:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
.ej-tipbox-editor {
min-height: 40px;
outline: none;
line-height: 1.5;
}
.ej-tipbox-editor:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
.ej-youtube-preview {
position: relative;
max-width: 320px;
border-radius: 8px;
overflow: hidden;
}
.ej-youtube-preview img {
display: block;
width: 100%;
border-radius: 8px;
}
.ej-yt-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 42px;
background: rgba(0,0,0,0.7);
border-radius: 12px;
pointer-events: none;
}
.ej-yt-play::after {
content: '';
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 9px 0 9px 16px;
border-color: transparent transparent transparent #fff;
}
.ej-yt-label {
position: absolute;
bottom: 6px;
left: 6px;
background: rgba(0,0,0,0.7);
color: #fff;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
}
.ej-table {
width: 100%;
border-collapse: collapse;
}
.ej-table th, .ej-table td {
border: 1px solid var(--border);
padding: 6px 10px;
}
.ej-table th {
background: var(--secondary, #f0f0f0);
font-weight: 600;
font-size: 13px;
}
.ej-table-edit .ej-cell-input {
border: none;
background: transparent;
padding: 4px 6px;
width: 100%;
font-size: 13px;
color: var(--text);
}
.ej-table th,
.ej-table td {
color: var(--text);
}
.ej-cell-header {
font-weight: 600;
}
.ej-table-actions {
width: 36px;
text-align: center;
border: none !important;
background: transparent !important;
}
.ej-czword-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 8px;
}
.ej-czword-table th {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
text-align: left;
padding: 4px 6px;
}
.ej-czword-table td {
padding: 3px 4px;
color: var(--text);
}
.ej-czword-table td input {
color: var(--text);
}
.ej-czword-cell {
display: flex;
align-items: center;
gap: 4px;
}
.ej-pair-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.ej-pair-arrow {
color: var(--text-muted);
font-size: 16px;
flex-shrink: 0;
}
.ej-pairs-list {
margin-bottom: 8px;
}
.ej-option-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
padding: 6px 8px;
border-radius: var(--radius-sm);
border: 2px solid transparent;
transition: border-color 0.2s;
}
.ej-option-correct {
border-color: #22c55e;
background: rgba(34,197,94,0.05);
}
.ej-option-badge {
font-size: 16px;
flex-shrink: 0;
width: 22px;
text-align: center;
}
.ej-mc-hint {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 8px;
}
.ej-radio-wrap {
display: flex;
align-items: center;
cursor: pointer;
flex-shrink: 0;
}
.ej-radio-wrap input[type="radio"] {
width: 20px;
height: 20px;
accent-color: #22c55e;
cursor: pointer;
}
.ej-image-block { padding: 8px 0; }
.ej-img-preview-wrap { position: relative; display: block; max-width: 100%; margin-bottom: 8px; }
.ej-img-preview { max-width: 100%; max-height: 260px; width: auto; border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.ej-img-remove { position: absolute; top: 4px; right: 4px; }
.ej-img-placeholder {
width: 200px; height: 120px; border: 2px dashed var(--border); border-radius: var(--radius);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
margin-bottom: 8px; color: var(--text-muted);
}
.ej-img-placeholder-icon { font-size: 32px; }
.ej-img-placeholder-text { font-size: 12px; }
.ej-img-btns { display: flex; gap: 8px; margin-bottom: 4px; }
.ej-timer-block { padding: 8px 0; }
.ej-timer-inputs { display: flex; gap: 12px; margin-bottom: 4px; }
.ej-timer-inputs .ej-field { flex: 1; }
.ej-timer-inputs .ej-input { width: 100%; text-align: center; }
.ej-timer-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; padding: 6px 10px; background: rgba(0,0,0,0.04); border-radius: 6px; }
.ej-pricing-cards { position: relative; border: 2px dashed var(--accent, #3bbceb); border-radius: 12px; background: var(--bg, #f8f9fa); padding: 12px; }
.ej-pricing-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.ej-pricing-card-item { background: var(--panel, #fff); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.ej-pricing-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ej-pricing-card-num { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.ej-pricing-card-actions { display: flex; gap: 2px; align-items: center; }
.ej-btn-move { color: var(--accent, #3bbceb); background: transparent; font-size: 15px; font-weight: 700; }
.ej-pricing-field { margin-bottom: 5px; }
.ej-pricing-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.ej-pricing-row { display: flex; gap: 8px; }
.ej-pricing-color-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.ej-color-preset { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s, transform 0.15s; }
.ej-color-preset:hover { transform: scale(1.15); }
.ej-color-preset.ej-color-selected { border-color: var(--text, #333); transform: scale(1.2); }
.ej-ic-options {
margin-bottom: 8px;
}
.ej-ic-option-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
padding: 8px 10px;
border-radius: var(--radius-sm);
border: 2px solid transparent;
}
.ej-ic-option-row.ej-option-correct {
border-color: #22c55e;
background: rgba(34,197,94,0.05);
}
.ej-ic-thumb {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
flex-shrink: 0;
}
.ej-ic-placeholder {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 2px dashed var(--border);
font-size: 20px;
flex-shrink: 0;
background: var(--bg);
}
.ej-ic-btns {
display: flex;
gap: 4px;
flex: 1;
}
.ej-upload-label {
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
}
.ej-ic-browse-popup {
position: absolute;
top: 0;
left: 0;
right: 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
z-index: 50;
padding: 12px;
}
.ej-ic-browse-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 14px;
margin-bottom: 10px;
}
.ej-ic-browse-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 8px;
}
.ej-ic-browse-img {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 8px;
border: 2px solid var(--border);
cursor: pointer;
transition: border-color 0.2s;
}
.ej-ic-browse-img:hover {
border-color: var(--accent);
}
.ej-ic-browse-empty {
text-align: center;
color: var(--text-muted);
padding: 20px;
font-size: 13px;
}
body.theme-dark .ej-editor-area {
background: #1a1d27;
border-color: #333;
}
body.theme-dark .ej-tipbox {
background: #252836;
}
body.theme-dark .ej-input {
background: #1a1d27;
border-color: #333;
color: #e0e0e0;
}
body.theme-dark .ej-btn-icon {
background: transparent;
color: #e0e0e0;
}
body.theme-dark .ej-table th,
body.theme-dark .ej-table td,
body.theme-dark .ej-table-edit .ej-cell-input,
body.theme-dark .ej-editor-area input,
body.theme-dark .ej-editor-area textarea,
body.theme-dark .ej-editor-area [contenteditable],
body.theme-dark .ej-editor-area td,
body.theme-dark .ej-editor-area th,
body.theme-dark .ej-editor-area .ce-paragraph,
body.theme-dark .ej-editor-area .cdx-input,
body.theme-dark .ej-czword-table td,
body.theme-dark .ej-czword-table th,
body.theme-dark .ej-czword-table input {
color: #e0e0e0 !important;
}
body.theme-dark .ej-table th {
background: #252836;
}
body.theme-orange .ej-editor-area {
background: #fff7ed;
border-color: #fed7aa;
}
body.theme-orange .ej-tipbox {
background: #ffedd5;
}
body.theme-orange .ej-input {
background: #fff7ed;
border-color: #fed7aa;
}
body.theme-casual .ej-editor-area {
background: #fff0f5;
border-color: #fbcfe8;
}
body.theme-casual .ej-tipbox {
background: #fce7f3;
}
body.theme-casual .ej-input {
background: #fff0f5;
border-color: #fbcfe8;
}
.block-order-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center; }
.block-order-modal { background:var(--panel-solid,#fff); border-radius:16px; padding:24px; width:400px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.block-order-item { display:flex; align-items:center; padding:10px 12px; margin-bottom:4px; background:var(--bg,#f5f5f5); border:1px solid var(--border); border-radius:8px; font-size:14px; font-weight:500; cursor:grab; transition:all 0.15s; user-select:none; }
.block-order-item:hover { border-color:var(--accent); }
.block-order-item.dragging { opacity:0.3; }
.block-order-item.drop-above { border-top:3px solid var(--accent); }
.block-order-item.drop-below { border-bottom:3px solid var(--accent); }
.ce-block__content.has-para-label,
.ce-block__content.has-header-label {
border: 2px dashed var(--accent, #3bbceb);
border-radius: 12px;
background: var(--bg, #f8f9fa);
padding: 12px;
position: relative;
}
.ce-block__content.has-para-label .ej-paragraph {
border: none !important;
background: none !important;
border-radius: 0 !important;
padding: 4px 0 0 0 !important;
margin: 0 !important;
}
.ce-block__content.has-header-label .ce-header {
border: none !important;
background: none !important;
border-radius: 0 !important;
padding: 4px 0 0 0 !important;
margin: 0 !important;
}
.ce-header { background: var(--bg, #f8f9fa); border-radius: 12px; padding: 8px 14px; margin: 2px 0; border: 2px dashed var(--accent, #3bbceb); position: relative; }
.ej-paragraph,
.ej-tipbox,
.ej-youtube, .ej-datatable, .ej-czword,
.ej-matchpairs, .ej-image-block, .ej-fillblanks,
.ej-wordorder, .ej-multichoice, .ej-listening,
.ej-timer-block, .ej-imagechoice {
border: 2px dashed var(--accent, #3bbceb);
border-radius: 12px;
background: var(--bg, #f8f9fa);
padding: 12px;
position: relative;
}
.ej-paragraph { padding: 12px; }
.ej-email-block, .ej-phone-block, .ej-action-button-block, .ej-trial-lesson-block { position: relative; }
.trial-status-select { padding:4px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; background:var(--panel); color:var(--text); cursor:pointer; }
.trial-notes-input { width:100%; min-width:120px; padding:4px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; background:var(--panel); color:var(--text); }
.monet-bg-preview {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
color: #6366f1;
}
.monet-bg-preview-sunburst {
background: repeating-conic-gradient(from 0deg at 50% 50%, currentColor 0deg 10deg, transparent 10deg 20deg);
animation: mp-preview-sunburst-rotate 20s linear infinite;
transform-origin: center center;
opacity: 0.55;
}
@keyframes mp-preview-sunburst-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.monet-bg-preview-aurora {
background: linear-gradient(135deg, #ff00cc 0%, #9333ea 20%, #3b82f6 40%, #06b6d4 60%, #10b981 80%, #fbbf24 100%);
background-size: 400% 400%;
animation: mp-preview-gradient-shift 8s ease infinite;
}
.monet-bg-preview-pulse {
background: radial-gradient(circle at 50% 50%, currentColor 0%, transparent 60%);
background-size: 100% 100%;
background-repeat: no-repeat;
animation: mp-preview-pulse 3s ease-in-out infinite;
transform-origin: center center;
opacity: 0.65;
}
@keyframes mp-preview-pulse {
0%, 100% { transform: scale(0.9); }
50% { transform: scale(1.2); }
}
.monet-bg-preview-mist {
background:
radial-gradient(ellipse 55% 40% at 20% 30%, currentColor 0%, transparent 65%),
radial-gradient(ellipse 50% 35% at 80% 60%, currentColor 0%, transparent 60%),
radial-gradient(ellipse 60% 45% at 50% 90%, currentColor 0%, transparent 65%);
background-size: 180% 180%, 200% 200%, 190% 190%;
background-repeat: no-repeat;
animation: mp-preview-mist 10s ease-in-out infinite;
opacity: 0.6;
}
@keyframes mp-preview-mist {
0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
33% { background-position: 100% 30%, 0% 70%, 30% 20%; }
66% { background-position: 50% 100%, 50% 0%, 80% 60%; }
}
.monet-bg-preview-candy {
background: linear-gradient(135deg, #ff00ff 0%, #ff6ec7 20%, #a855f7 40%, #7c3aed 60%, #06b6d4 80%, #00d4ff 100%);
background-size: 400% 400%;
animation: mp-preview-gradient-shift 7s ease infinite;
}
.monet-bg-preview-sunset {
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 20%, #ff9ff3 40%, #ee5a6f 60%, #f368e0 80%, #ff9966 100%);
background-size: 400% 400%;
animation: mp-preview-gradient-shift 9s ease infinite;
}
.monet-bg-preview-ocean {
background: linear-gradient(135deg, #0077be 0%, #00a8cc 20%, #00c9ff 40%, #4facfe 60%, #0077ff 80%, #003d82 100%);
background-size: 400% 400%;
animation: mp-preview-gradient-shift 9s ease infinite;
}
.monet-bg-preview-forest {
background: linear-gradient(135deg, #134e5e 0%, #0ea271 25%, #11998e 50%, #38ef7d 75%, #0ea271 100%);
background-size: 400% 400%;
animation: mp-preview-gradient-shift 10s ease infinite;
}
.monet-bg-preview-midnight {
background: linear-gradient(135deg, #0f0c29 0%, #302b63 25%, #24243e 50%, #6a11cb 75%, #2575fc 100%);
background-size: 400% 400%;
animation: mp-preview-gradient-shift 11s ease infinite;
}
.monet-bg-preview-ripple {
background:
radial-gradient(circle at 50% 50%,
transparent 0%, transparent 9%,
currentColor 9%, currentColor 11%,
transparent 11%, transparent 22%,
currentColor 22%, currentColor 24%,
transparent 24%, transparent 35%,
currentColor 35%, currentColor 37%,
transparent 37%, transparent 48%,
currentColor 48%, currentColor 50%,
transparent 50%);
background-size: 100% 100%;
background-repeat: no-repeat;
animation: mp-preview-ripple 3s linear infinite;
transform-origin: center center;
opacity: 0.55;
}
@keyframes mp-preview-ripple {
from { transform: scale(0.4); }
to { transform: scale(1.8); }
}
@keyframes mp-preview-gradient-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.dash-progress-shell {
padding: 60px 40px;
text-align: center;
}
.dash-progress-bar {
width: 100%;
max-width: 480px;
height: 8px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
margin: 0 auto;
}
.dash-progress-fill {
height: 100%;
background: var(--accent);
border-radius: 8px;
transition: width 0.25s ease;
width: 5%;
}
.tq-help-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--panel);
color: var(--text);
border: 1.5px solid var(--border);
font-size: 13px; font-weight: 700;
cursor: help;
opacity: 0.85;
transition: opacity .15s, transform .15s, border-color .15s;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
user-select: none;
}
.tq-help-btn:hover {
opacity: 1;
transform: scale(1.15);
border-color: var(--accent);
color: var(--accent);
}
.tq-help-tip {
display: none;
position: fixed;
z-index: 9999;
background: var(--panel-solid, #fff);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
font-size: 12px;
color: var(--text);
width: 280px;
line-height: 1.5;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
pointer-events: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.stats-utc-hint {
font-size: 12px;
color: var(--text-muted);
margin: 6px 0 14px;
padding: 6px 10px;
background: var(--panel-solid, #fff);
border: 1px dashed var(--border);
border-radius: 8px;
display: inline-block;
max-width: 100%;
}
.stats-utc-hint[data-tz-diff="1"] {
border-color: rgba(99, 102, 241, 0.45);
color: var(--text);
}
.section-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 100px 40px;
min-height: 320px;
color: var(--text-muted);
font-size: 14px;
}
.section-loader-bar {
width: 100%;
max-width: 480px;
height: 10px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.section-loader-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--accent, #6366f1), transparent);
border-radius: 999px;
animation: section-loader-slide 1.4s ease-in-out infinite;
}
@keyframes section-loader-slide {
0%   { left: -40%; }
100% { left: 100%; }
}
.section-loader-text {
font-weight: 500;
letter-spacing: 0.2px;
}
.ej-block-cookie-badge {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
padding: 2px 6px;
border-radius: 6px;
background: rgba(217, 119, 6, 0.12);
color: #d97706;
cursor: help;
vertical-align: middle;
}
.ej-block-cookie-badge svg {
width: 14px;
height: 14px;
}
.ej-block-cookie-badge[data-active="0"] {
background: rgba(148, 163, 184, 0.15);
color: #94a3b8;
opacity: 0.7;
}
.trial-cookie-cell span,
.fin-cookie-cell span {
font-size: 12px;
color: var(--text-muted, #6b7280);
}
.trial-cookie-cell span[style*="text-dim"],
.fin-cookie-cell span[style*="text-dim"] {
color: var(--text-dim, #9ca3af);
}
.perm-matrix-wrap {
width: 100%;
max-width: 880px;
margin: 0;
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--panel-solid, #fff);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.perm-matrix {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--text);
table-layout: fixed;
}
.perm-matrix thead th {
position: sticky;
top: 0;
background: var(--panel-solid, #fff);
z-index: 2;
padding: 12px 8px;
text-align: left;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--text-dim);
border-bottom: 2px solid var(--border);
}
.perm-matrix .pm-col-name {
width: 340px;
}
.perm-matrix .pm-col-role {
text-align: center;
width: 160px;
border-left: 1px solid rgba(127,127,127,0.10);
}
.perm-matrix .pm-role-h {
flex-wrap: nowrap;
font-size: 11.5px;
letter-spacing: 0.2px;
white-space: nowrap;
}
.perm-matrix .pm-col-role .pm-role-ico {
width: 22px;
height: 22px;
}
.perm-matrix .pm-role-h {
display: inline-flex;
align-items: center;
gap: 6px;
}
.perm-matrix .pm-role-ico {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
flex-shrink: 0;
}
.perm-matrix .pm-role-ico svg { width: 14px !important; height: 14px !important; color: #fff; }
.perm-matrix tr.pm-section {
background: linear-gradient(90deg, var(--pm-cb, transparent), var(--pm-cb2, transparent));
}
.perm-matrix tr.pm-section td {
padding: 14px 14px 14px 12px;
font-weight: 700;
font-size: 14px;
border-top: 1px solid var(--border);
border-left: 4px solid var(--pm-c, transparent);
}
.perm-matrix tr.pm-section .pm-section-ico {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
vertical-align: middle;
margin-right: 10px;
}
.perm-matrix tr.pm-section .pm-section-ico svg { width: 16px !important; height: 16px !important; color: #fff; }
.perm-matrix tr.pm-section .pm-section-title {
vertical-align: middle;
}
.perm-matrix .pm-clickable {
cursor: pointer;
transition: color 0.12s ease, text-decoration 0.12s ease;
border-radius: 4px;
outline: none;
}
.perm-matrix .pm-clickable:hover,
.perm-matrix .pm-clickable:focus {
text-decoration: underline;
text-decoration-color: var(--pm-c, currentColor);
text-underline-offset: 3px;
}
.perm-matrix .pm-clickable:focus-visible {
box-shadow: 0 0 0 2px var(--pm-c, var(--accent, #6366f1));
}
.perm-matrix tr.pm-subgroup {
background: linear-gradient(90deg, var(--pm-cb, transparent), var(--pm-cb2, transparent));
}
.perm-matrix tr.pm-subgroup td {
padding: 10px 14px 8px 28px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--pm-c, var(--text-dim));
border-left: 4px solid var(--pm-c, transparent);
border-top: 1px solid rgba(127,127,127,0.12);
}
.perm-matrix tr.pm-row td.pm-perm-name {
padding: 7px 10px 7px 28px;
border-left: 4px solid var(--pm-cbr, transparent);
}
.perm-matrix tr.pm-row td.pm-cell {
text-align: center;
padding: 4px 0;
width: 160px;
border-left: 1px solid rgba(127,127,127,0.10);
}
.perm-matrix tr.pm-row td.pm-cell input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--pm-c, var(--accent, #6366f1));
margin: 0;
vertical-align: middle;
}
.perm-matrix tr.pm-row td.pm-cell input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: 0.35;
}
.perm-matrix tr.pm-row {
transition: background 0.12s ease;
border-top: 1px solid rgba(127,127,127,0.06);
}
.perm-matrix tr.pm-row:nth-of-type(even) {
background: rgba(127,127,127,0.025);
}
.perm-matrix tr.pm-row:hover {
background: rgba(99,102,241,0.10);
}
.perm-matrix-wrap--single {
max-width: 520px;
margin: 0;
}
.perm-matrix.perm-matrix--single {
table-layout: auto;
}
.perm-matrix.perm-matrix--single tr.pm-row td.pm-perm-name {
padding: 7px 16px 7px 28px;
width: auto;
}
.perm-matrix.perm-matrix--single tr.pm-row td.pm-cell {
width: 60px;
text-align: right;
padding-right: 16px;
}
.perm-matrix.perm-matrix--single tr.pm-row td.pm-cell input[type="checkbox"] {
margin-right: 4px;
}
.dict-table td.row-drag-handle {
width: 24px;
text-align: center;
cursor: grab;
opacity: 0.35;
transition: opacity 0.15s;
color: var(--text-dim);
user-select: none;
padding: 0;
}
.dict-table td.row-drag-handle:hover {
opacity: 1;
color: var(--accent);
}
.dict-table td.row-drag-handle:active {
cursor: grabbing;
}
.dict-table tr.dict-data-row.row-dragging {
opacity: 0.45;
}
.dict-table tr.dict-data-row.drop-target-above td {
box-shadow: inset 0 2px 0 0 var(--accent);
}
.dict-table tr.dict-data-row.drop-target-below td {
box-shadow: inset 0 -2px 0 0 var(--accent);
}
.dict-table tr.dict-divider-row td {
padding: 0;
border: none;
background: transparent;
}
.dict-table tr.dict-divider-zone {
cursor: pointer;
height: 6px;
transition: height 0.15s;
}
.dict-table tr.dict-divider-zone .dict-divider-zone-inner {
height: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: height 0.15s, background 0.15s;
}
.dict-table tr.dict-divider-zone .dict-divider-zone-label {
display: none;
font-size: 11px;
color: var(--accent);
font-weight: 600;
background: var(--panel-solid, #1e2130);
padding: 2px 10px;
border-radius: 999px;
border: 1px dashed var(--accent);
white-space: nowrap;
pointer-events: none;
}
.dict-table tr.dict-divider-zone:hover .dict-divider-zone-inner,
.dict-table tr.dict-divider-zone.drop-target-active .dict-divider-zone-inner {
height: 26px;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
}
.dict-table tr.dict-divider-zone:hover .dict-divider-zone-label,
.dict-table tr.dict-divider-zone.drop-target-active .dict-divider-zone-label {
display: inline-flex;
}
.dict-table tr.dict-divider-zone.drop-target-active .dict-divider-zone-inner {
background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.dict-table tr.dict-divider-active td {
padding: 0;
}
.dict-table tr.dict-divider-active .dict-divider-bar {
display: flex;
align-items: stretch;
height: 36px;
border-top: 2px dashed var(--accent);
border-bottom: 2px dashed var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
position: relative;
}
.dict-table tr.dict-divider-active .dict-divider-side {
flex: 1;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
.dict-table tr.dict-divider-active .dict-divider-side.dict-divider-words {
color: var(--text-dim);
justify-content: flex-end;
border-right: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.dict-table tr.dict-divider-active .dict-divider-side.dict-divider-sentences {
color: var(--accent);
}
.dict-table tr.dict-divider-active .dict-divider-remove {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
border: none;
background: var(--accent);
color: #fff;
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.dict-table tr.dict-divider-active .dict-divider-remove:hover {
background: var(--accent-hover);
}
.dict-table tr.dict-divider-active.drop-target-active .dict-divider-bar {
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.dict-table tr.dict-divider-active.drop-target-above .dict-divider-side.dict-divider-words {
background: color-mix(in srgb, var(--accent) 28%, transparent);
color: var(--accent);
}
.dict-table tr.dict-divider-active.drop-target-below .dict-divider-side.dict-divider-sentences {
background: color-mix(in srgb, var(--accent) 28%, transparent);
color: var(--accent);
}
.pc-wrap { width: 100%; max-width: none; }
.pc-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.pc-outputs-col { display: flex; flex-direction: column; gap: 14px; }
.pc-key-results {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.pc-key-card {
position: relative;
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-top: 2px solid var(--accent, #6366f1);
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pc-key-card.is-loss { border-top-color: #ef4444; }
.pc-key-card-label {
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.pc-key-card-label svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pc-key-card-value {
font-size: 22px;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.pc-key-card.is-loss .pc-key-card-value { color: #ef4444; }
.pc-key-card .pc-help-btn { position: absolute; top: 8px; right: 8px; }
.pc-key-card-label { justify-content: space-between; padding-right: 22px; }
.pc-key-card-label > span[data-l10n] { flex: 1 1 auto; }
.pc-key-card-switch { transform: scale(0.85); transform-origin: right center; flex: 0 0 auto; margin-left: 6px; }
.pc-key-card-caption {
font-size: 11px;
color: var(--text-dim);
margin-top: 2px;
line-height: 1.3;
font-style: italic;
}
.pc-slider-bar {
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
padding: 10px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pc-slider-bar-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.pc-slider-bar-row > input[type="range"] {
flex: 1;
min-width: 0;
accent-color: var(--accent, #6366f1);
}
.pc-slider-bar .pc-share-side { white-space: nowrap; }
.pc-slider-bar-meta {
font-size: 11px;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
align-items: baseline;
}
.pc-slider-bar-meta b { color: var(--text); font-weight: 600; }
.pc-slider-bar .pc-overload-inline-msg { margin: 4px 0 0; }
.pc-table-wrap {
width: 100%;
max-width: 680px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
background: var(--panel-solid, #fff);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
overflow: hidden;
}
.pc-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
color: var(--text);
}
.pc-table tr.pc-trow--section {
background: linear-gradient(90deg, var(--pc-cb, transparent), var(--pc-cb2, transparent));
}
.pc-table tr.pc-trow--section td {
padding: 13px 16px;
font-weight: 700;
font-size: 13px;
color: var(--text);
border-top: 1px solid var(--border, #e5e7eb);
border-left: 4px solid var(--pc-c, transparent);
}
.pc-table tbody:first-child tr.pc-trow--section:first-child td { border-top: 0; }
.pc-table .pc-section-ico {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
vertical-align: middle;
margin-right: 10px;
}
.pc-table .pc-section-ico svg { width: 15px !important; height: 15px !important; color: #fff; }
.pc-table .pc-section-title { vertical-align: middle; }
.pc-table tr.pc-trow--input,
.pc-table tr.pc-trow--full {
border-top: 1px solid rgba(127,127,127,0.07);
transition: background 0.12s ease;
}
.pc-table tr.pc-trow--input:hover { background: rgba(99,102,241,0.07); }
.pc-table tr.pc-trow--input td.pc-tcell,
.pc-table tr.pc-trow--full td.pc-tcell-full {
border-left: 4px solid var(--pc-cbr, transparent);
}
.pc-table td.pc-tcell { padding: 7px 16px 7px 18px; }
.pc-row {
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
}
.pc-row-label {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
}
.pc-row-label .pc-icon {
width: 18px;
height: 18px;
color: var(--text-dim);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pc-row-label label {
font-size: 13px;
color: var(--text);
margin: 0;
cursor: default;
line-height: 1.3;
}
.pc-row-label .pc-help-btn { flex: 0 0 auto; }
.pc-row-control { flex: 0 0 auto; }
.pc-table input.pc-row-control,
.pc-table .pc-tax-fields input[type="number"] {
width: 110px;
text-align: right;
padding: 6px 8px;
border: 1px solid var(--border, #cbd5e1);
border-radius: 6px;
background: var(--bg, #fff);
color: var(--text, #111);
font: inherit;
font-variant-numeric: tabular-nums;
}
.pc-table input.pc-row-control:focus {
outline: none;
border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.pc-table input.pc-row-control:disabled { opacity: 0.5; }
.pc-table tr.pc-tax-ins-row.is-off .pc-row-label { opacity: 0.5; }
.pc-slider-cell {
display: inline-flex;
align-items: center;
gap: 10px;
}
.pc-slider-cell input[type="range"] {
width: 150px;
accent-color: var(--accent, #6366f1);
}
.pc-slider-cell .pc-slider-val {
font-weight: 700;
color: var(--accent);
min-width: 40px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.pc-table td.pc-tcell-full { padding: 10px 16px 10px 18px; }
.pc-table td.pc-tcell-full .pc-pkg-toggle { margin: 0; }
.pc-table tr:hover .pc-help-btn { opacity: 0.7; }
.pc-intensity-block {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
background: var(--panel-solid, #fff);
}
.pc-intensity-header {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 13px;
color: var(--text);
margin-bottom: 6px;
}
.pc-intensity-rows { display: flex; flex-direction: column; gap: 6px; }
.pc-intensity-thead,
.pc-intensity-row {
display: grid;
grid-template-columns: 28px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 32px;
gap: 8px;
align-items: center;
}
.pc-intensity-thead {
padding: 0 6px 4px;
margin-bottom: 2px;
}
.pc-intensity-thead .pc-bar-col {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-dim);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pc-intensity-row {
padding: 5px 6px;
border: 1px solid var(--border, #e5e7eb);
border-radius: 8px;
background: var(--bg, #f8fafc);
}
.pc-intensity-row .pc-bar-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent, #6366f1);
color: #fff;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pc-intensity-row input[type="number"] {
width: 100%;
min-width: 0;
padding: 5px 6px;
text-align: right;
border: 1px solid var(--border, #cbd5e1);
border-radius: 6px;
background: var(--bg, #fff);
color: var(--text, #111);
font: inherit;
font-variant-numeric: tabular-nums;
}
.pc-intensity-row input[type="number"]:focus {
outline: none;
border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.pc-intensity-actions { margin-top: 6px; }
.pc-intensity-row .pc-bar-del {
background: transparent;
border: 1px solid var(--border, #e5e7eb);
color: #ef4444;
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.pc-intensity-row .pc-bar-del:hover:not(:disabled) { background: rgba(239, 68, 68, 0.1); }
.pc-intensity-row .pc-bar-del:disabled { opacity: 0.3; cursor: not-allowed; }
.pc-intensity-block.is-mismatch .pc-intensity-row input[data-bar-field="students"] {
border-color: #ef4444;
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}
.pc-intensity-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.pc-intensity-actions .btn { padding: 4px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.pc-intensity-summary {
font-size: 12px;
color: var(--text-dim);
margin-left: auto;
}
.pc-intensity-summary.is-mismatch {
color: #ef4444;
font-weight: 600;
}
@media (max-width: 720px) {
.pc-table td.pc-tcell { padding-left: 12px; padding-right: 12px; }
.pc-table input.pc-row-control { width: 84px; }
.pc-slider-cell input[type="range"] { width: 90px; }
.pc-intensity-thead,
.pc-intensity-row {
grid-template-columns: 24px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 28px;
gap: 5px;
}
}
.pc-details-wrap {
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
}
.pc-details-wrap > summary {
cursor: pointer;
padding: 12px 16px;
font-weight: 600;
font-size: 14px;
color: var(--text);
list-style: none;
user-select: none;
display: flex;
align-items: center;
gap: 10px;
}
.pc-details-wrap > summary::-webkit-details-marker { display: none; }
.pc-details-wrap > summary::before {
content: '';
display: inline-block;
width: 8px; height: 8px;
border-right: 2px solid var(--text-dim);
border-bottom: 2px solid var(--text-dim);
transform: rotate(-45deg);
transition: transform .15s ease;
margin-right: 2px;
}
.pc-details-wrap[open] > summary::before { transform: rotate(45deg); }
.pc-details-wrap > .pc-details-body { padding: 0 16px 14px; }
.pc-strategy-card {
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-left: 4px solid var(--accent, #6366f1);
border-radius: 10px;
padding: 12px 16px;
}
.pc-strategy-card.pc-strategy-balanced {
border-left-color: #22c55e;
background: color-mix(in srgb, #22c55e 5%, var(--panel-solid, #fff));
}
.pc-strategy-card.pc-strategy-over_demanded {
border-left-color: #f59e0b;
background: color-mix(in srgb, #f59e0b 6%, var(--panel-solid, #fff));
}
.pc-strategy-card.pc-strategy-severely_over {
border-left-color: #ef4444;
background: color-mix(in srgb, #ef4444 7%, var(--panel-solid, #fff));
}
.pc-strategy-header {
font-size: 11px;
font-weight: 700;
color: var(--text-dim, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.pc-strategy-status {
font-size: 13px;
line-height: 1.5;
color: var(--text, #1f2937);
margin-bottom: 8px;
}
.pc-strategy-status strong {
color: var(--accent, #6366f1);
font-weight: 700;
}
.pc-strategy-list {
margin: 6px 0 10px;
padding-left: 22px;
font-size: 13px;
line-height: 1.6;
color: var(--text, #1f2937);
}
.pc-strategy-list li { margin-bottom: 3px; }
.pc-strategy-note {
font-size: 12px;
line-height: 1.4;
color: var(--text-muted, #94a3b8);
font-style: italic;
border-top: 1px dashed var(--border, #e5e7eb);
padding-top: 6px;
}
.pc-formula-wrap > summary { gap: 8px; }
.pc-formula-wrap > summary svg { width: 16px; height: 16px; vertical-align: -3px; }
.pc-formula-body {
padding: 10px 16px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.pc-formula-intro {
font-size: 12px;
color: var(--text-dim, #94a3b8);
font-style: italic;
line-height: 1.4;
flex: 1 1 auto;
min-width: 0;
}
.pc-formula-header-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-bottom: 4px;
border-bottom: 1px dashed var(--border, #e5e7eb);
}
.pc-formula-toggle {
display: inline-flex;
gap: 4px;
flex: 0 0 auto;
}
.pc-formula-toggle .hw-mode-pill {
padding: 4px 10px;
font-size: 12px;
}
.pc-formula-toggle .hw-mode-pill.active {
background: var(--accent, #6366f1);
color: #fff;
border-color: var(--accent, #6366f1);
}
.pc-formula-step {
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-left: 3px solid var(--accent, #6366f1);
border-radius: 8px;
padding: 10px 14px;
}
.pc-formula-step-title {
font-size: 12px;
font-weight: 700;
color: var(--text, #1f2937);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.pc-formula-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent, #6366f1) 18%, transparent);
color: var(--accent, #6366f1);
font-size: 11px;
font-weight: 700;
flex: 0 0 auto;
}
.pc-formula-row {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 13px;
line-height: 1.6;
display: flex;
gap: 8px;
align-items: baseline;
flex-wrap: wrap;
}
.pc-formula-row-label {
flex: 0 0 auto;
min-width: 92px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: var(--text-muted, #94a3b8);
font-family: Inter, system-ui, sans-serif;
}
.pc-formula-row-body { flex: 1 1 auto; }
.pc-formula-row.is-formula .pc-formula-row-body { color: var(--text-dim, #94a3b8); }
.pc-formula-row.is-substitute .pc-formula-row-body { color: var(--text, #1f2937); }
.pc-formula-row.is-result .pc-formula-row-body {
color: var(--accent, #6366f1);
font-weight: 600;
}
.pc-formula-note {
margin-top: 6px;
font-size: 12px;
line-height: 1.45;
color: var(--text-muted, #94a3b8);
font-style: italic;
border-top: 1px dashed var(--border, #e5e7eb);
padding-top: 6px;
}
.pc-salary-preview { display: none !important; }
.pc-group {
background: transparent;
border: 0;
padding: 0;
}
.pc-group-header {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 14px;
margin-bottom: 10px;
color: var(--text);
}
.pc-group-header svg { color: var(--accent, #6366f1); flex: 0 0 auto; }
.pc-input-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
}
.pc-input-row:last-child { border-bottom: 0; }
.pc-input-row .pc-icon {
width: 18px;
height: 18px;
color: var(--text-dim);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pc-input-row label {
flex: 1;
font-size: 13px;
color: var(--text);
line-height: 1.3;
margin: 0;
}
.pc-input-row input[type="number"] {
width: 110px;
text-align: right;
padding: 6px 8px;
border: 1px solid var(--border, #cbd5e1);
border-radius: 6px;
background: var(--bg, #fff);
color: var(--text, #111);
font: inherit;
font-variant-numeric: tabular-nums;
}
.pc-input-row input[type="number"]:focus {
outline: none;
border-color: var(--accent, #6366f1);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.pc-input-row input[type="range"] {
flex: 1;
max-width: 200px;
accent-color: var(--accent, #6366f1);
}
.pc-pkg-toggle {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 8px 0;
align-items: center;
}
.pc-pkg-toggle .hw-mode-pill {
cursor: pointer;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
font-size: 12px;
transition: background .15s, color .15s, border-color .15s;
}
.pc-pkg-toggle .hw-mode-pill.active,
.pc-pkg-toggle .hw-mode-pill:has(input:checked) {
background: var(--accent, #6366f1);
color: #fff;
border-color: var(--accent, #6366f1);
}
.pc-period-pill {
cursor: pointer;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
font: inherit;
font-size: 13px;
transition: background .15s, color .15s, border-color .15s;
}
.pc-period-pill.active {
background: var(--accent, #6366f1);
color: #fff;
border-color: var(--accent, #6366f1);
}
.pc-share-row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 0 4px;
position: relative;
}
.pc-share-labels {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text);
flex-wrap: wrap;
}
.pc-share-side {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pc-share-side b {
font-size: 18px;
color: var(--accent, #6366f1);
font-variant-numeric: tabular-nums;
min-width: 38px;
display: inline-block;
text-align: center;
}
.pc-share-count {
font-size: 11px;
color: var(--text-dim);
font-weight: 600;
font-variant-numeric: tabular-nums;
margin-left: 2px;
}
.pc-share-labels { flex-wrap: nowrap; }
.pc-share-side svg { color: var(--text-dim); }
.pc-share-sep { color: var(--text-dim); }
.pc-share-row input[type="range"] {
width: 100%;
accent-color: var(--accent, #6366f1);
}
.pc-share-derived {
font-size: 11px;
color: var(--text-dim);
text-align: center;
font-variant-numeric: tabular-nums;
}
.pc-salary-preview {
background: var(--bg, rgba(99,102,241,0.06));
border: 1px dashed var(--accent, #6366f1);
border-radius: 10px;
padding: 12px 10px;
margin-top: 10px;
text-align: center;
}
.pc-salary-big {
font-size: 22px;
font-weight: 700;
color: var(--accent, #6366f1);
margin-bottom: 4px;
font-variant-numeric: tabular-nums;
}
.pc-salary-formula {
font-size: 11px;
color: var(--text-dim);
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
word-break: break-word;
}
.pc-help-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: transparent;
color: var(--text-dim, #64748b);
border: 1px solid var(--border, #cbd5e1);
font-size: 11px;
font-weight: 600;
cursor: help;
flex: 0 0 auto;
user-select: none;
transition: opacity .15s, transform .15s, border-color .15s, color .15s;
opacity: 0.35;
}
.pc-intensity-block:hover .pc-help-btn,
.pc-slider-bar:hover .pc-help-btn { opacity: 0.7; }
.pc-help-btn:hover {
opacity: 1;
transform: scale(1.12);
border-color: var(--accent, #6366f1);
color: var(--accent, #6366f1);
}
.pc-card-help {
position: absolute;
right: 8px;
bottom: 8px;
}
.pc-stat-card .pc-card-help {
width: 18px;
height: 18px;
font-size: 10px;
border-width: 1.25px;
}
.pc-key-card:hover .pc-help-btn,
.pc-stat-card:hover .pc-card-help { opacity: 0.7; }
.pc-help-tip {
display: none;
position: fixed;
z-index: 9999;
background: var(--panel-solid, #fff);
color: var(--text, #111);
border: 1px solid var(--border, #cbd5e1);
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.45;
width: 280px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
pointer-events: none;
backdrop-filter: none;
}
.pc-results-header { margin-bottom: 4px; }
.pc-results-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
align-items: start;
margin-bottom: 16px;
}
@media (max-width: 1500px) {
.pc-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.pc-results-grid { grid-template-columns: 1fr; }
}
.pc-stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 0;
}
.pc-results-section {
margin-bottom: 0;
padding: 10px;
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
}
.pc-results-section-title {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 8px;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text);
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}
.pc-results-section-title .pc-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 6px;
flex: 0 0 auto;
}
.pc-results-section-title .pc-section-icon svg {
width: 14px;
height: 14px;
}
.pc-section-green .pc-section-icon { background: #dcfce7; color: #16a34a; }
.pc-section-amber .pc-section-icon { background: #fef3c7; color: #d97706; }
.pc-section-blue .pc-section-icon { background: #dbeafe; color: #2563eb; }
.pc-section-purple .pc-section-icon { background: #ede9fe; color: #7c3aed; }
.pc-section-teal .pc-section-icon { background: #ccfbf1; color: #0d9488; }
.pc-section-pink .pc-section-icon { background: #fce7f3; color: #db2777; }
.pc-results-section .pc-stats-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.pc-stat-card {
position: relative;
background: var(--bg, transparent);
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
padding: 10px 12px 26px;
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 70px;
}
.pc-stat-card .stat-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.pc-stat-card .stat-icon svg {
width: 16px;
height: 16px;
}
.pc-stat-card .stat-icon--green { background: #dcfce7; color: #16a34a; }
.pc-stat-card .stat-icon--teal { background: #ccfbf1; color: #0d9488; }
.pc-stat-card .stat-icon--amber { background: #fef3c7; color: #d97706; }
.pc-stat-card .stat-icon--purple { background: #ede9fe; color: #7c3aed; }
.pc-stat-card .stat-icon--blue { background: #dbeafe; color: #2563eb; }
.pc-stat-card .stat-icon--pink { background: #fce7f3; color: #db2777; }
.pc-stat-card .stat-content { flex: 1; min-width: 0; }
.pc-stat-card .stat-value {
font-size: 17px;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1.2;
margin-bottom: 3px;
word-break: break-word;
}
.pc-stat-card .stat-subvalue {
font-size: 12px;
line-height: 1.25;
color: var(--text-dim);
}
.pc-chart-wrap {
position: relative;
height: 320px;
margin-top: 8px;
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
padding: 14px;
}
.pc-input-row label.pc-switch,
.pc-switch {
position: relative;
display: inline-block;
width: 26px;
height: 14px;
flex: 0 0 auto;
padding: 0;
margin: 0;
}
.pc-switch input { opacity: 0; width: 0; height: 0; }
.pc-switch-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--border, #cbd5e1);
border-radius: 999px;
transition: background .2s;
}
.pc-switch-slider::before {
position: absolute;
content: "";
height: 10px;
width: 10px;
left: 2px;
top: 2px;
background: #fff;
border-radius: 50%;
transition: transform .2s;
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.pc-switch input:checked + .pc-switch-slider { background: var(--accent, #6366f1); }
.pc-switch input:checked + .pc-switch-slider::before { transform: translateX(12px); }
.pc-tax-toggle-row {
background: color-mix(in srgb, var(--accent) 6%, transparent);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 6px;
border-bottom: 0 !important;
flex-wrap: nowrap;
}
.pc-tax-toggle-row label[for="pcTaxEnabled"] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.pc-radio-group {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.pc-radio-pill {
cursor: pointer;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--border, #cbd5e1);
background: transparent;
color: var(--text);
font-size: 12px;
transition: background .15s, color .15s, border-color .15s;
user-select: none;
}
.pc-radio-pill.active {
background: var(--accent, #6366f1);
color: #fff;
border-color: var(--accent, #6366f1);
}
.pc-tax-fields .pc-input-row input[type="number"]:disabled {
background: var(--bg, transparent);
color: var(--text-dim);
cursor: not-allowed;
}
.pc-mode-row {
background: color-mix(in srgb, var(--accent) 5%, transparent);
border-radius: 8px;
padding: 8px 10px;
border-bottom: 0 !important;
margin-bottom: 4px;
}
.pc-mode-toggle {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.pc-mode-toggle .pc-student-mode-pill {
cursor: pointer;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid var(--border, #cbd5e1);
background: transparent;
color: var(--text);
font: inherit;
font-size: 12px;
transition: background .15s, color .15s, border-color .15s;
}
.pc-mode-toggle .pc-student-mode-pill.active {
background: var(--accent, #6366f1);
color: #fff;
border-color: var(--accent, #6366f1);
}
.pc-manual-fields {
background: color-mix(in srgb, var(--accent) 3%, transparent);
border-left: 3px solid var(--accent, #6366f1);
border-radius: 0 8px 8px 0;
padding: 4px 10px;
margin: 6px 0;
}
.pc-demand-hint {
font-size: 11px;
color: var(--text-dim);
padding: 4px 0 2px;
font-variant-numeric: tabular-nums;
}
.pc-students-split {
font-size: 12px;
color: var(--accent, #6366f1);
font-weight: 600;
padding: 6px 4px 2px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.pc-stat-card .stat-icon--red { background: #fee2e2; color: #dc2626; }
.pc-input-row input[type="number"].pc-overload {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
background: color-mix(in srgb, #ef4444 6%, var(--bg, #fff));
}
.pc-input-row input[type="number"].pc-overload:focus {
outline: none;
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.30);
}
.pc-demand-hint.pc-overload {
color: #dc2626;
font-weight: 600;
}
.pc-stat-card.pc-overload {
border-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}
.pc-overload-inline-msg {
background: color-mix(in srgb, #ef4444 8%, transparent);
border-left: 3px solid #ef4444;
color: #b91c1c;
padding: 7px 10px;
border-radius: 0 6px 6px 0;
font-size: 11px;
line-height: 1.4;
margin: 4px 0 6px;
word-break: break-word;
}
#pcOutRecommendation,
#pcOutUnmetDemand {
font-size: 13px;
font-weight: 600;
line-height: 1.35;
font-variant-numeric: normal;
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
hyphens: auto;
}
#pcOutRecommendation { padding-right: 8px; }
.es-filterbar {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
padding: 10px 12px;
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
}
.es-scopes {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.es-scope {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
font-size: 13px;
color: var(--text, #1a1a1a);
}
.es-scope input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #6366f1;
}
.es-status {
padding: 10px 2px;
color: var(--text-dim, #64748b);
font-size: 13px;
}
.es-results { display: block; }
.es-group { margin-bottom: 22px; }
.es-group-title {
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
color: var(--text, #1a1a1a);
padding-bottom: 4px;
border-bottom: 1px solid var(--border, #e5e7eb);
}
.es-card {
background: var(--panel-solid, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
cursor: pointer;
transition: background .15s, border-color .15s, transform .1s;
}
.es-card:hover {
background: rgba(99, 102, 241, 0.06);
border-color: #6366f1;
transform: translateY(-1px);
}
.es-card-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: baseline;
margin-bottom: 6px;
flex-wrap: wrap;
}
.es-card-title {
font-weight: 600;
font-size: 14px;
color: var(--text, #1a1a1a);
}
.es-card-path {
font-size: 12px;
color: var(--text-dim, #64748b);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.es-hits { display: block; }
.es-hit {
font-size: 13px;
line-height: 1.55;
padding: 2px 0;
color: var(--text-dim, #475569);
word-break: break-word;
}
.es-hit-label {
display: inline-block;
min-width: 110px;
color: var(--text-muted, #94a3b8);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-right: 4px;
}
.es-hit mark {
background: rgba(250, 204, 21, 0.5);
color: inherit;
padding: 1px 3px;
border-radius: 3px;
font-weight: 600;
}
.es-trunc {
font-size: 12px;
color: var(--text-muted, #94a3b8);
padding: 6px 2px 0;
font-style: italic;
}