.project-screen-setting { padding: 20px; background: #f5f7fb; }
.project-screen-title-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.project-screen-title-row h5 { margin:0 0 4px; font-weight:600; }
.project-screen-title-row > div > span { color:#8993a5; font-size:12px; }
.project-screen-switch-box { display:flex; align-items:center; gap:14px; margin:0; padding:9px 12px; border:1px solid #e1e5ee; border-radius:8px; background:#fff; font-size:13px; }
.project-screen-switch-box .custom-control { min-height:20px; }
.project-screen-panel { display:grid; grid-template-columns:220px 1fr; height:calc(100vh - 185px); min-height:540px; overflow:hidden; border:1px solid #e1e5ee; border-radius:10px; background:#fff; }
.project-screen-module-list { padding:15px 12px; border-right:1px solid #e6e9f0; }
.project-screen-module-list h6 { margin:0 8px 14px; font-weight:600; }
.project-screen-module-active { display:flex; align-items:center; gap:10px; padding:13px 12px; border-radius:7px; color:#3870f6; background:#edf3ff; font-size:13px; font-weight:600; }
.project-screen-workarea { min-width:0; }
.project-screen-workhead { height:62px; display:flex; align-items:center; gap:24px; padding:0 18px; border-bottom:1px solid #e6e9f0; }
.project-screen-worktitle { margin-right:auto; }
.project-screen-worktitle strong, .project-screen-worktitle small { display:block; }
.project-screen-worktitle small { margin-top:3px; color:#8a94a6; }
.project-screen-tab { align-self:stretch; padding:0 7px; border:0; border-bottom:2px solid transparent; color:#7d8798; background:transparent; cursor:pointer; }
.project-screen-tab.active { color:#3870f6; border-bottom-color:#4f7cff; }
.project-screen-config { display:grid; grid-template-columns:280px 1fr; height:calc(100% - 62px); }
.project-screen-list-panel { padding:14px; border-right:1px solid #e6e9f0; overflow:auto; }
.project-screen-list-tools { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#8b95a6; font-size:12px; }
.project-screen-list-item { display:grid; grid-template-columns:1fr auto; align-items:center; min-height:48px; padding:8px 10px; margin-bottom:5px; border:1px solid transparent; border-radius:7px; cursor:pointer; font-size:13px; }
.project-screen-list-item:hover { background:#f7f9fc; }
.project-screen-list-item.active { border-color:#cddaff; background:#edf3ff; }
.project-screen-default-mark { margin-left:7px; color:#3970f6; font-size:11px; }
.project-screen-list-delete { opacity:0; border:0; color:#dc5965; background:transparent; cursor:pointer; font-size:12px; }
.project-screen-list-item:hover .project-screen-list-delete, .project-screen-list-item.active .project-screen-list-delete { opacity:1; }
.project-screen-preview-panel { padding:16px; min-width:0; }
.project-screen-preview-head { display:flex; justify-content:space-between; align-items:center; min-height:32px; margin-bottom:10px; }
.project-screen-preview-wrap { height:calc(100% - 42px); min-height:360px; display:grid; place-items:center; padding:28px; border-radius:8px; background:#e7e9f1; }
.project-screen-preview { width:min(100%, 650px); aspect-ratio:16/9; display:grid; grid-template-columns:22% 1fr; overflow:hidden; border:8px solid #d6d9e4; border-radius:5px; background:#f7f8fd; }
.project-screen-preview-nav { padding:12px 10px; background:#4d7881; }
.project-screen-preview-nav span { display:block; width:28px; height:28px; margin-bottom:22px; border-radius:6px; background:#6f8cff; }
.project-screen-preview-nav i { display:block; width:78%; height:8px; margin:14px 0; border-radius:20px; background:rgba(231,244,247,.7); }
.project-screen-preview-content { display:grid; grid-template-rows:32px 1fr; gap:12px; padding:13px; }
.project-screen-preview-content header, .project-screen-preview-content aside, .project-screen-preview-content main { border-radius:5px; background:#fff; }
.project-screen-preview-content section { display:grid; grid-template-columns:34% 1fr; gap:12px; }
.project-screen-preview-content main { position:relative; overflow:hidden; background:#edf1ff; }
.project-screen-preview-content main:before, .project-screen-preview-content main:after { content:""; position:absolute; border-radius:50%; background:#c9d6ff; }
.project-screen-preview-content main:before { width:90px; height:90px; right:36px; top:25px; }
.project-screen-preview-content main:after { width:170px; height:170px; right:62px; bottom:-90px; }
.project-screen-preview-general3 .project-screen-preview-content main { background:#eef2ff; }
.project-screen-preview-guangyuan .project-screen-preview-nav { background:#295f70; }
.project-screen-empty { display:none; color:#8a94a6; }
.project-screen-template-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.project-screen-template-item { position:relative; padding:10px; border:1px solid #dfe3eb; border-radius:8px; cursor:pointer; }
.project-screen-template-item:hover { border-color:#91aaf8; }
.project-screen-template-item.selected { padding:9px; border:2px solid #4f7cff; background:#f6f8ff; }
.project-screen-template-item.added { opacity:.5; cursor:not-allowed; }
.project-screen-template-check { position:absolute; top:17px; right:17px; width:20px; height:20px; display:grid; place-items:center; border:1px solid #c9d0dd; border-radius:4px; color:transparent; background:#fff; z-index:2; }
.project-screen-template-item.selected .project-screen-template-check { color:#fff; border-color:#4f7cff; background:#4f7cff; }
.project-screen-template-preview { height:135px; display:grid; place-items:center; border-radius:6px; background:#e8ebf3; }
.project-screen-template-preview > div { width:82%; aspect-ratio:16/9; display:grid; grid-template-columns:22% 1fr; border:4px solid #d5d9e5; background:#4d7881; }
.project-screen-template-preview > div:after { content:""; margin:7px; background:#f4f6fc; }
.project-screen-template-name { display:flex; justify-content:space-between; margin-top:9px; font-size:13px; }
.project-screen-template-name span { color:#8a94a6; font-size:11px; }
.project-screen-permission { height:calc(100% - 62px); padding:16px; }
.project-screen-permission-tools { display:flex; align-items:center; margin-bottom:10px; font-size:12px; }
.project-screen-permission-tools > span { margin-right:auto; color:#7d8798; }
.project-screen-search { width:280px; }
.project-screen-permission-table { height:calc(100% - 82px); overflow:auto; border:1px solid #e0e4ec; }
.project-screen-permission-table thead th { position:sticky; top:0; z-index:2; text-align:center; background:#f1f3f9; }
.project-screen-permission-table tbody td { text-align:center; vertical-align:middle; }
.project-screen-permission-empty { display:none; padding:45px; text-align:center; color:#8a94a6; }
.project-screen-page { height:42px; display:flex; justify-content:center; align-items:end; gap:12px; font-size:12px; }
.project-screen-view-page { height:100vh; padding:18px; color:#dce9ff; background:#07152e; }
.project-screen-view-head { height:55px; display:flex; justify-content:space-between; align-items:flex-start; }
.project-screen-view-head strong, .project-screen-view-head span { display:block; }
.project-screen-view-head span { margin-top:3px; color:#83a4d7; font-size:12px; }
.project-screen-view-tabs { display:flex; gap:8px; }
.project-screen-view-tabs a { padding:7px 12px; border:1px solid #244b78; border-radius:5px; color:#8fb4e6; }
.project-screen-view-tabs a.active { color:#fff; border-color:#3c88e8; background:#153c6b; }
.project-screen-live { height:calc(100% - 55px); padding:16px; border:1px solid #1d4f83; background:linear-gradient(135deg,#081a36,#0c2a4d); }
.project-screen-live-title { margin-bottom:15px; text-align:center; font-size:22px; letter-spacing:5px; }
.project-screen-live-grid { height:calc(100% - 48px); display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.project-screen-live-grid section { padding:14px; border:1px solid #1b568f; background:rgba(8,33,65,.76); }
.project-screen-live-grid h6 { color:#78bafa; }
.project-screen-live-grid section div { height:calc(100% - 25px); background:linear-gradient(180deg,rgba(30,99,156,.22),rgba(9,42,77,.06)); }
@media(max-width:900px){.project-screen-panel{grid-template-columns:160px 1fr}.project-screen-config{grid-template-columns:220px 1fr}.project-screen-template-grid{grid-template-columns:1fr}.project-screen-search{width:210px}}