:root {
    --focus-cyan: #58c9c5;
    --focus-cyan-soft: #91e0db;
    --focus-green: #79e693;
    --focus-red: #e07a82;
    --focus-ink: #03090b;
    --focus-panel: #0b1213;
    --focus-panel-soft: #121b1c;
    --focus-copy: #dce2df;
    --focus-copy-muted: #9ca8a4;
}

body.focusWorkbenchOpen {
    overflow: hidden;
}

.focusWorkbench[hidden] {
    display: none !important;
}

.focusWorkbench {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    grid-template-rows: 68px minmax(0, 1fr);
    color: var(--focus-copy);
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    background: #05090a;
    isolation: isolate;
}

.focusWorkbenchBackdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(rgba(2, 7, 8, 0.74), rgba(2, 6, 7, 0.88)),
        url("./assets/branding/tno-preview-workspace-bg.png") center / cover;
}

.focusWorkbenchBackdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.016) 0,
            rgba(255, 255, 255, 0.016) 1px,
            rgba(0, 0, 0, 0.026) 1px,
            rgba(0, 0, 0, 0.026) 3px
        );
    mix-blend-mode: screen;
}

.focusWorkbench button,
.focusWorkbench input,
.focusWorkbench select,
.focusWorkbench textarea {
    font: inherit;
    color: var(--focus-copy);
    border-radius: 0;
}

.focusWorkbench button {
    min-height: 34px;
    padding: 4px 12px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/button-medium.webp") 8 12 fill / 7px 10px / 0 stretch;
    background: #1b201f;
    text-shadow: 0 1px #000;
    cursor: pointer;
}

.focusWorkbench button:hover {
    color: #fff;
    filter: brightness(1.12);
}

.focusWorkbench button:focus-visible,
.focusWorkbench input:focus-visible,
.focusWorkbench select:focus-visible,
.focusWorkbench textarea:focus-visible,
.focusTreeViewport:focus-visible {
    outline: 1px solid var(--focus-cyan-soft);
    outline-offset: 2px;
}

.focusWorkbench button.isPrimary,
.focusWorkbench button[aria-pressed="true"] {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #f4ffff;
    background: #061516;
    box-shadow: 0 0 12px rgba(88, 201, 197, 0.18);
}

.focusWorkbench button.isDanger,
.focusDeleteNode {
    border-image-source: url("./assets/interface-ui/button-red.webp") !important;
    color: #ffd6d7 !important;
}

.focusWorkbenchHeader {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: auto minmax(210px, 1fr) minmax(230px, 310px) 130px minmax(130px, auto);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 12px;
    box-sizing: border-box;
    border-bottom: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-frontend-bottom.webp") 28 30 70 / 0 0 8px 0 / 0 stretch;
    background:
        linear-gradient(90deg, rgba(5, 13, 14, 0.96), rgba(24, 29, 28, 0.96)),
        url("./assets/interface-ui/header-wider.webp") center / auto 58px repeat-x;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.72);
}

.focusWorkbenchBack {
    min-width: 136px;
}

.focusWorkbenchHeading {
    display: grid;
    min-width: 0;
    width: max-content;
    overflow: visible;
    line-height: 1;
}

.focusWorkbenchHeading small,
.focusInspectorHeader small,
.focusInspectorSectionTitle small,
.focusValidationPanel header small,
.focusConfirmDialog small {
    color: var(--focus-cyan);
    font-size: 10px;
    letter-spacing: 0.12em;
}

.focusWorkbenchTitleEditor {
    display: flex;
    align-items: baseline;
    width: max-content;
    min-width: max-content;
    overflow: visible;
    color: #f4f6f3;
    font: 24px/1.05 "WenHanJianZhu", "RuiZheng", sans-serif;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-shadow: 0 2px 3px #000, 0 0 8px rgba(88, 201, 197, 0.2);
}

.focusWorkbenchTitleEditor input {
    flex: 0 0 auto;
    width: var(--focus-country-title-width, 6em);
    min-width: 4em;
    max-width: none;
    padding: 0 2px 1px 0;
    border: 0;
    border-bottom: 1px solid transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-shadow: inherit;
    background: transparent;
    outline: 0;
}

.focusWorkbenchTitleEditor input:hover {
    border-bottom-color: rgba(145, 224, 219, 0.5);
}

.focusWorkbenchTitleEditor input:focus {
    border-bottom-color: var(--focus-cyan-soft);
    color: #fff;
    box-shadow: 0 2px rgba(88, 201, 197, 0.18);
}

.focusWorkbenchTitleEditor span {
    flex: 0 0 auto;
}

.focusTreeMetaField {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    height: 42px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 22 fill / 7px 10px / 0 stretch;
    color: var(--focus-copy-muted);
    background: #071011;
}

.focusTreeMetaField span {
    font-size: 11px;
    white-space: nowrap;
}

.focusTreeMetaField input {
    min-width: 0;
    height: 24px;
    padding: 0 6px;
    border: 0;
    color: var(--focus-cyan-soft);
    background: rgba(0, 0, 0, 0.24);
    outline: 0;
}

.focusTreeMetaField--tag input {
    text-transform: uppercase;
}

.focusWorkbenchSaveStatus {
    min-width: 0;
    color: var(--focus-copy-muted);
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
}

.focusWorkbenchSaveStatus.isSaved {
    color: var(--focus-cyan-soft);
}

.focusWorkbenchSaveStatus.isError {
    color: var(--focus-red);
}

.focusWorkbenchBody {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.focusInspectorToggleInput {
    position: absolute;
    display: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.focusInspectorToggleButton,
.focusInspectorCloseButton {
    display: none;
}

.focusTreeStage {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border: 10px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 / 10px / 0 stretch;
    background: #040809;
}

.focusTreeToolbar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    min-height: 52px;
    padding: 5px 8px;
    box-sizing: border-box;
    overflow: visible;
    border-bottom: 1px solid #050708;
    background:
        linear-gradient(rgba(7, 14, 15, 0.28), rgba(5, 10, 11, 0.78)),
        url("./assets/interface-ui/category-header-long.webp") left center / auto 48px repeat-x;
    scrollbar-color: var(--focus-cyan) #111716;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.64);
}

.focusTreeToolbar button {
    flex: 0 0 auto;
    min-height: 34px;
    padding-inline: 9px;
    font-size: 10px;
    white-space: nowrap;
}

.focusTreeToolbar button img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    object-fit: contain;
    vertical-align: middle;
}

.focusToolbarDivider {
    flex: 0 0 1px;
    width: 1px;
    height: 27px;
    margin: 0 3px;
    background: linear-gradient(transparent, rgba(117, 205, 200, 0.55), transparent);
}

.focusTreeViewport {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    background: #071011;
}

.focusTreeViewport.isPanning {
    cursor: grabbing;
}

.focusTreeViewport.isLinking {
    cursor: crosshair;
}

.focusTreeWorld {
    position: absolute;
    left: 0;
    top: 0;
    width: 9600px;
    height: 6500px;
    transform-origin: 0 0;
    will-change: transform;
    background:
        radial-gradient(
            ellipse at 50% 22%,
            rgba(19, 51, 51, 0.42) 0,
            rgba(8, 20, 21, 0.94) 42%,
            #03090a 78%
        );
    box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.72);
}

.focusTreeWorld::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at 50% 20%,
        transparent 0 28%,
        rgba(0, 0, 0, 0.28) 80%
    );
}

.focusTreeLinks,
.focusTreeNodeLayer {
    position: absolute;
    inset: 0;
    width: 9600px;
    height: 6500px;
}

.focusTreeLinks {
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.focusTreeNodeLayer {
    z-index: 2;
    pointer-events: none;
}

.focusTreeLinkShadow,
.focusTreeLink {
    fill: none;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.focusTreeLinkShadow {
    stroke: rgba(0, 0, 0, 0.88);
    stroke-width: 8px;
}

.focusTreeLink {
    stroke: #70df83;
    stroke-width: 3px;
    filter: drop-shadow(0 0 2px rgba(112, 223, 131, 0.7));
}

.focusTreeLink.isOr {
    stroke-dasharray: 8 5;
}

.focusTreeLink.isInvalid {
    stroke: var(--focus-red);
}

.focusTreeExclusiveShadow,
.focusTreeExclusive {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.focusTreeExclusiveShadow {
    stroke: rgba(0, 0, 0, 0.9);
    stroke-width: 9px;
}

.focusTreeExclusive {
    stroke: #df777e;
    stroke-width: 3px;
    stroke-dasharray: 5 4;
    filter: drop-shadow(0 0 2px rgba(223, 119, 126, 0.65));
}

.focusTreeNode {
    position: absolute;
    width: 165px;
    height: 128px;
    box-sizing: border-box;
    pointer-events: auto;
    user-select: none;
    touch-action: none;
    cursor: grab;
    filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.82));
}

.focusTreeNode:active {
    cursor: grabbing;
}

.focusTreeNode::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: 6;
    border: 1px solid transparent;
    pointer-events: none;
}

.focusTreeNode:hover::before {
    border-color: rgba(145, 224, 219, 0.44);
}

.focusTreeNode.isSelected::before {
    border-color: var(--focus-cyan-soft);
    box-shadow:
        0 0 0 1px rgba(4, 12, 13, 0.86),
        0 0 12px rgba(88, 201, 197, 0.5);
}

.focusTreeNode.isLinkSource::before {
    border-color: #f0d868;
    box-shadow: 0 0 12px rgba(240, 216, 104, 0.6);
}

.focusTreeNodeIcon {
    position: absolute;
    left: 8px;
    top: -50px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 148px;
    height: 150px;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.92));
    isolation: isolate;
}

.focusTreeNodeIcon img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.focusTreeNodeIcon::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: -1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle,
            rgba(134, 236, 246, 0.64) 0 15%,
            rgba(75, 185, 207, 0.48) 28%,
            rgba(30, 119, 148, 0.24) 47%,
            transparent 70%
        ),
        repeating-conic-gradient(
            from -12deg,
            rgba(136, 231, 240, 0.32) 0deg 5deg,
            transparent 5deg 15deg
        );
    filter: blur(3px);
    transform: scale(0.84);
}

.focusTreeNodeIconShine {
    position: absolute !important;
    inset: 0;
    z-index: 2 !important;
    opacity: 0;
    mix-blend-mode: screen;
    filter:
        brightness(2.15)
        saturate(0.65)
        sepia(0.12)
        drop-shadow(0 0 8px rgba(126, 231, 242, 0.92));
    clip-path: polygon(-25% 0, 0 0, -30% 100%, -55% 100%);
}

.focusTreeNodeIcon img:not([src]),
.focusTreeNodeIcon img[src=""] {
    visibility: hidden;
}

.focusTreeNodeIcon::after {
    content: "?";
    position: absolute;
    inset: 22px;
    z-index: 0;
    display: grid;
    place-items: center;
    color: #384443;
    font: 38px/1 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.focusTreeNodeTitle {
    position: absolute;
    left: 0;
    bottom: 7px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 164px;
    height: 50px;
    padding: 8px 9px 6px;
    box-sizing: border-box;
    overflow: hidden;
    color: #d4d8d6;
    font: 14px/1.1 "RuiZheng", "PingFang SC", sans-serif;
    text-align: center;
    text-shadow: 0 1px 2px #000, 1px 0 1px #000;
    background: url("./国策工作台素材/国策框-不可用.png") center / 164px 50px no-repeat;
}

.focusTreeNode[data-preview-state="available"] .focusTreeNodeTitle,
.focusTreeNode[data-preview-state="current"] .focusTreeNodeTitle {
    color: #f1f3ef;
    background-image: url("./国策工作台素材/国策框-可用.png");
}

.focusTreeNode[data-preview-state="completed"] .focusTreeNodeTitle {
    color: #e9fff0;
    background-image: url("./国策工作台素材/国策框-完成.png");
}

.focusTreeNode[data-preview-state="current"] .focusTreeNodeIcon {
    filter:
        drop-shadow(0 6px 7px rgba(0, 0, 0, 0.92))
        drop-shadow(0 0 13px rgba(104, 220, 235, 0.9));
}

.focusTreeNode[data-preview-state="current"] .focusTreeNodeIcon::before {
    opacity: 0.86;
    animation: focusCurrentAura 1.55s ease-in-out infinite;
}

.focusTreeNode[data-preview-state="current"] .focusTreeNodeIconShine {
    animation: focusCurrentSweep 1.5s ease-in-out infinite;
}

.focusTreeNode[data-preview-state="completed"] .focusTreeNodeIcon {
    filter:
        drop-shadow(0 6px 7px rgba(0, 0, 0, 0.92))
        drop-shadow(0 0 9px rgba(113, 229, 144, 0.48));
}

.focusTreeNodeCollision {
    position: absolute;
    left: -3px;
    top: 4px;
    z-index: 7;
    display: none;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #fff;
    border: 1px solid #ff9da1;
    background: #60171d;
}

.focusTreeNode.hasError .focusTreeNodeCollision {
    display: grid;
}

@keyframes focusCurrentAura {
    0%,
    100% {
        opacity: 0.62;
        transform: scale(0.88) rotate(-2deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.08) rotate(4deg);
    }
}

@keyframes focusCurrentSweep {
    0%,
    12% {
        opacity: 0;
        clip-path: polygon(-25% 0, 0 0, -30% 100%, -55% 100%);
    }
    34% {
        opacity: 0.92;
    }
    58% {
        opacity: 0.68;
        clip-path: polygon(100% 0, 132% 0, 102% 100%, 70% 100%);
    }
    72%,
    100% {
        opacity: 0;
        clip-path: polygon(125% 0, 155% 0, 125% 100%, 95% 100%);
    }
}

.focusTreeEmpty {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    justify-items: center;
    width: min(440px, calc(100% - 40px));
    padding: 28px 34px;
    box-sizing: border-box;
    border: 11px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-border.webp") 18 fill / 11px / 0 stretch;
    color: var(--focus-copy-muted);
    text-align: center;
    background: rgba(6, 12, 13, 0.92);
    transform: translate(-50%, -50%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.72);
}

.focusTreeEmpty[hidden] {
    display: none;
}

.focusTreeEmpty img {
    width: 44px;
    height: 44px;
    margin-bottom: 9px;
    object-fit: contain;
}

.focusTreeEmpty strong {
    color: #f0f3ef;
    font: 20px/1.15 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.focusTreeEmpty span {
    margin: 7px 0 16px;
    font-size: 12px;
    line-height: 1.55;
}

.focusCreateNext {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 8;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    min-width: min(370px, calc(100% - 360px));
    min-height: 62px;
    padding: 8px 20px 9px 15px !important;
    box-sizing: border-box;
    border-width: 10px !important;
    color: #f3ffff !important;
    background: rgba(4, 18, 19, 0.96) !important;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.72),
        0 0 18px rgba(87, 215, 207, 0.3) !important;
    transform: translateX(-50%);
}

.focusCreateNext > img {
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.focusCreateNext > strong,
.focusCreateNext > small {
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focusCreateNext > strong {
    font: 18px/1.05 "WenHanJianZhu", "RuiZheng", sans-serif;
    letter-spacing: 0.04em;
}

.focusCreateNext > small {
    color: #9fc9c5;
    font: 10px/1.2 "RuiZheng", "PingFang SC", sans-serif;
}

.focusCreateNext:hover {
    filter: brightness(1.18);
}

.focusTreeViewportHud {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
    padding: 7px 11px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/tile-mini-dialog.webp") 10 fill / 7px / 0 stretch;
    color: var(--focus-copy-muted);
    font-size: 10px;
    background: rgba(4, 10, 11, 0.9);
    pointer-events: none;
}

.focusTreeViewportHud output {
    margin-left: auto;
    color: var(--focus-cyan-soft);
    font-size: 12px;
}

.focusInteractionStatus {
    position: absolute;
    left: 50%;
    bottom: 88px;
    z-index: 6;
    max-width: min(620px, 70%);
    padding: 7px 13px;
    box-sizing: border-box;
    color: #f2f5f1;
    font-size: 11px;
    text-align: center;
    background: rgba(5, 13, 14, 0.93);
    border: 1px solid var(--focus-cyan);
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.focusInteractionStatus.isVisible {
    opacity: 1;
}

.focusInteractionStatus.isError {
    color: #ffd2d4;
    border-color: var(--focus-red);
}

.focusInspector {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 10px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-border.webp") 18 fill / 10px / 0 stretch;
    background: rgba(8, 15, 16, 0.97);
    box-shadow: -8px 0 20px rgba(0, 0, 0, 0.58);
}

.focusInspectorHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 55px;
    padding: 7px 11px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(132, 145, 139, 0.28);
    background:
        linear-gradient(90deg, rgba(4, 11, 12, 0.32), rgba(3, 8, 9, 0.72)),
        url("./assets/interface-ui/category-header-long.webp") left center / auto 48px repeat-x;
}

.focusInspectorHeader > span:first-child {
    display: grid;
}

.focusInspectorHeader strong {
    color: #f2f4f1;
    font: 18px/1.1 "WenHanJianZhu", "RuiZheng", sans-serif;
}

#focusInspectorCoordinate {
    color: var(--focus-cyan-soft);
    font-size: 11px;
    white-space: nowrap;
}

.focusInspectorEmpty {
    align-self: start;
    margin: 12px;
    padding: 20px;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-scroll-window.webp") 12 fill / 8px / 0 stretch;
    color: var(--focus-copy-muted);
    background: #081011;
}

.focusInspectorEmpty strong {
    color: #e4e8e5;
    font: 17px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.focusInspectorEmpty p {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.6;
}

.focusInspectorFields {
    min-height: 0;
    padding: 10px 9px 20px;
    overflow: auto;
    scrollbar-color: var(--focus-cyan) #111716;
}

.focusInspectorFields[hidden] {
    display: none;
}

.focusOpenDetail {
    position: sticky;
    top: 0;
    z-index: 8;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 54px !important;
    margin: 0 0 11px;
    padding: 6px 14px !important;
    box-sizing: border-box;
    overflow: hidden;
    color: #f4ffff !important;
    font: 17px/1.15 "WenHanJianZhu", "RuiZheng", sans-serif !important;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-image-source: url("./assets/interface-ui/button-blue.webp") !important;
    background: #061516 !important;
    box-shadow:
        0 0 0 1px rgba(88, 201, 197, 0.25),
        0 0 16px rgba(88, 201, 197, 0.28) !important;
}

.focusOpenDetail:disabled {
    filter: grayscale(0.8) brightness(0.64);
}

.focusInspectorSection {
    display: grid;
    gap: 8px;
    margin: 0 0 11px;
    padding: 10px;
    box-sizing: border-box;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-scroll-window.webp") 12 fill / 8px / 0 stretch;
    background: rgba(7, 15, 16, 0.82);
}

.focusInspectorSectionTitle,
.focusAdvancedRules > summary > span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    border-bottom: 1px solid rgba(88, 201, 197, 0.32);
}

.focusInspectorSectionTitle small,
.focusAdvancedRules > summary small {
    color: var(--focus-cyan);
    font-size: 11px;
}

.focusInspectorSectionTitle strong,
.focusAdvancedRules > summary strong {
    color: #eef2ef;
    font: 15px/1.1 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.focusField {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: var(--focus-copy-muted);
    font-size: 10px;
}

.focusField > span {
    color: #b9c2be;
}

.focusField > small {
    color: #7f8f8a;
    font-size: 9px;
    line-height: 1.45;
}

.focusField input,
.focusField select,
.focusField textarea {
    width: 100%;
    min-width: 0;
    padding: 7px 14px;
    box-sizing: border-box;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/find-editbox.webp") 12 40 fill / 7px 12px / 0 stretch;
    color: #e7ebe8;
    background: #061011;
    outline: 0;
}

.focusField input,
.focusField select {
    line-height: 1.25;
}

.focusField textarea {
    resize: vertical;
    line-height: 1.55;
}

.focusNodeNameField input {
    min-height: 46px;
    color: #f2f5f2;
    font: 18px/1.15 "RuiZheng", "PingFang SC", sans-serif;
    text-align: center;
    text-shadow: 0 1px 2px #000;
}

.focusNodeNameField input::placeholder {
    color: #75827e;
}

.focusFieldRow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.focusIconEditor {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.focusIconEditor > div:last-of-type {
    display: grid;
    gap: 5px;
}

.focusIconPreview {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: 7px;
    box-sizing: border-box;
    border: 8px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-thin-crt.webp") 18 fill / 8px / 0 stretch;
    background: #050b0c;
}

.focusIconPreview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.focusDirectionPad {
    display: grid;
    grid-template-columns: repeat(3, 42px);
    grid-template-areas:
        ". up ."
        "left down right";
    justify-content: center;
    gap: 4px;
}

.focusDirectionPad [data-focus-nudge="up"] {
    grid-area: up;
}

.focusDirectionPad [data-focus-nudge="left"] {
    grid-area: left;
}

.focusDirectionPad [data-focus-nudge="down"] {
    grid-area: down;
}

.focusDirectionPad [data-focus-nudge="right"] {
    grid-area: right;
}

.focusDirectionPad button {
    min-width: 42px;
    padding: 0;
    font-size: 17px;
}

.focusInspectorRelationList {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    min-height: 30px;
}

.focusInspectorRelationList:empty::before {
    content: "未设置互斥国策";
    align-self: center;
    color: #718985;
    font-size: 9px;
}

.focusInspectorRelationList button {
    width: auto;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 27px !important;
    padding: 2px 7px !important;
    overflow: hidden;
    border-image-source: url("./assets/interface-ui/button-red.webp") !important;
    color: #f0c4c6;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focusInspectorRelationList button::after {
    content: " ×";
    color: #fff;
}

.focusAdvancedRules > summary {
    cursor: pointer;
    list-style: none;
}

.focusAdvancedRules > summary::-webkit-details-marker {
    display: none;
}

.focusAdvancedRules > summary::after {
    content: "展开";
    margin-left: auto;
    color: var(--focus-cyan);
    font-size: 10px;
}

.focusAdvancedRules[open] > summary::after {
    content: "收起";
}

.focusAdvancedRules[open] > summary {
    margin-bottom: 8px;
}

.focusDeleteNode {
    width: 100%;
    margin-top: 1px;
}

.focusValidationPanel {
    min-height: 116px;
    max-height: 210px;
    padding: 9px;
    box-sizing: border-box;
    overflow: auto;
    border-top: 1px solid rgba(88, 201, 197, 0.28);
    background: rgba(3, 9, 10, 0.98);
}

.focusValidationPanel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.focusValidationPanel header > span {
    display: grid;
}

.focusValidationPanel header strong {
    font: 14px/1.1 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.focusValidationPanel header output {
    color: var(--focus-cyan-soft);
    font-size: 10px;
}

.focusValidationPanel.hasErrors header output {
    color: var(--focus-red);
}

#focusValidationList {
    color: var(--focus-copy-muted);
    font-size: 9px;
    line-height: 1.45;
}

#focusValidationList p {
    margin: 4px 0;
}

#focusValidationList button {
    width: 100%;
    min-height: 28px;
    margin: 3px 0;
    padding: 3px 7px;
    color: #f0b7ba;
    font-size: 9px;
    text-align: left;
}

.focusDetailDialog[hidden] {
    display: none;
}

.focusDetailDialog {
    position: absolute;
    inset: 0;
    z-index: 18;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.78);
}

.focusDetailPanel {
    --focus-detail-scale: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 550px;
    height: 850px;
    box-sizing: border-box;
    overflow: visible;
    color: var(--focus-copy);
    background: #061215;
    transform:
        translate(-50%, -50%)
        scale(var(--focus-detail-scale));
    transform-origin: center;
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.9),
        0 0 22px rgba(88, 201, 197, 0.12);
}

.focusDetailPanel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    box-sizing: border-box;
    border: 8px solid transparent;
    border-image: url("./国策工作台素材/国策详情窗框.webp") 64 / 8px / 0 stretch;
    pointer-events: none;
}

.focusDetailPanel::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 215px;
    z-index: 5;
    width: 510px;
    height: 610px;
    box-sizing: border-box;
    border: 1px solid var(--focus-cyan);
    pointer-events: none;
}

.focusDetailTop {
    position: absolute;
    left: 1px;
    top: 1px;
    z-index: 3;
    width: 548px;
    height: 220px;
    background: url("./国策工作台素材/国策详情顶部.webp") 0 0 / 548px 220px no-repeat;
}

.focusDetailHeader {
    position: absolute;
    inset: 0;
}

.focusDetailHeader > input {
    position: absolute;
    left: 49px;
    top: 14px;
    display: block;
    width: 450px;
    height: 30px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 0;
    overflow: hidden;
    color: #e8eeeb;
    font: 20px/28px "RuiZheng", "PingFang SC", sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    outline: 0;
    box-shadow: none;
}

.focusDetailHeader > input:focus-visible {
    box-shadow: inset 0 -1px var(--focus-cyan);
}

.focusDetailClose {
    position: absolute;
    right: 10px;
    top: 9px;
    width: 30px;
    min-width: 30px !important;
    height: 30px;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background:
        url("./国策工作台素材/国策详情关闭.webp")
        center / 30px 30px no-repeat !important;
    box-shadow: none !important;
}

.focusDetailIconSlot {
    position: absolute;
    left: 27px;
    top: 46px;
    display: grid;
    place-items: center;
    width: 158px;
    height: 158px;
    padding: 11px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

.focusDetailIconSlot > img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.9));
}

.focusDetailAura {
    position: absolute;
    inset: 3px;
    z-index: 1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle,
            rgba(134, 236, 246, 0.66) 0 14%,
            rgba(75, 185, 207, 0.46) 28%,
            rgba(30, 119, 148, 0.24) 48%,
            transparent 72%
        ),
        repeating-conic-gradient(
            from -12deg,
            rgba(136, 231, 240, 0.28) 0deg 5deg,
            transparent 5deg 15deg
        );
    filter: blur(3px);
}

.focusDetailStatusColumn {
    position: absolute;
    inset: 0;
}

.focusDetailDays {
    position: absolute;
    left: 205px;
    top: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 175px;
    height: 30px;
    padding: 5px 8px;
    box-sizing: border-box;
    overflow: hidden;
    color: #f3f4f1;
    font: 12px/20px "RuiZheng", "PingFang SC", sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #080b0b;
    box-shadow:
        inset 0 0 0 1px #1b1f1e,
        inset 0 0 8px #000;
}

.focusDetailDays > input {
    width: 54px;
    height: 20px;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: right;
    background: transparent;
    outline: 0;
    appearance: textfield;
}

.focusDetailDays > input::-webkit-inner-spin-button,
.focusDetailDays > input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.focusDetailDays > small {
    font: inherit;
}

.focusDetailDays:focus-within {
    box-shadow:
        inset 0 0 0 1px var(--focus-cyan),
        inset 0 0 8px #000;
}

.focusDetailState {
    position: absolute;
    left: 205px;
    top: 74px;
    width: 175px;
    height: 17px;
    padding: 0;
    border: 0;
    overflow: hidden;
    color: #90aaa6;
    font: 9px/15px "RuiZheng", "PingFang SC", sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    outline: 0;
    appearance: none;
    cursor: pointer;
}

.focusDetailState:focus-visible {
    box-shadow: inset 0 -1px var(--focus-cyan);
}

.focusDetailStatusColumn button {
    position: absolute;
    left: 390px;
    top: 46px;
    width: 148px;
    min-width: 148px;
    height: 36px;
    min-height: 36px;
    padding: 1px 12px 0 !important;
    border: 0 !important;
    color: #f0f2ef;
    font: 12px/34px "RuiZheng", "PingFang SC", sans-serif;
    background:
        url("./国策工作台素材/国策详情按钮.webp")
        center / 148px 36px no-repeat !important;
    box-shadow: none;
}

.focusDetailStatusColumn button:disabled {
    cursor: default;
    filter: grayscale(0.35) brightness(0.82);
}

.focusDetailDialog[data-preview-state="available"] .focusDetailStatusColumn button {
    color: #f5ffff;
    filter: brightness(1.12);
}

.focusDetailDialog[data-preview-state="current"] .focusDetailAura {
    opacity: 0.9;
    animation: focusCurrentAura 1.55s ease-in-out infinite;
}

.focusDetailDialog[data-preview-state="current"] .focusDetailIconSlot > img {
    filter:
        drop-shadow(0 5px 7px rgba(0, 0, 0, 0.9))
        drop-shadow(0 0 14px rgba(104, 220, 235, 0.96));
}

.focusDetailDialog[data-preview-state="current"] .focusDetailState,
.focusDetailDialog[data-preview-state="current"] .focusDetailStatusColumn button {
    color: #9bedf0;
    text-shadow: 0 0 6px rgba(102, 221, 235, 0.64);
}

.focusDetailDialog[data-preview-state="completed"] .focusDetailState {
    color: var(--focus-green);
}

.focusDetailRules {
    position: absolute;
    left: 215px;
    top: 98px;
    width: 287px;
    height: 100px;
    padding: 3px 5px;
    box-sizing: border-box;
    resize: none;
    overflow: auto;
    border: 0;
    color: #b8d9d4;
    font: 11px/1.35 "RuiZheng", "PingFang SC", sans-serif;
    white-space: pre-wrap;
    background: transparent;
    outline: 0;
    scrollbar-color: var(--focus-cyan) #111716;
}

.focusDetailRules:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(88, 201, 197, 0.55);
}

.focusDetailSlot {
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
    overflow: auto;
    border: 0;
    background: #040d0f;
    scrollbar-color: var(--focus-cyan) #111716;
}

.focusDetailSlot > strong {
    color: #e8efeb;
}

.focusDetailSlot > textarea {
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    resize: none;
    overflow-wrap: anywhere;
    border: 0;
    color: #e1e7e3;
    font: 15px/1.5 "RuiZheng", "PingFang SC", sans-serif;
    white-space: pre-wrap;
    background: transparent;
    outline: 0;
}

.focusDetailDescription {
    left: 37px;
    top: 230px;
    width: 476px;
    height: 425px;
    padding: 0 11px 12px;
}

.focusDetailDescription > strong {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.focusDetailDescription > textarea {
    width: 100%;
    height: 100%;
    overflow: auto;
    text-align: center;
}

.focusDetailEffect {
    left: 50px;
    top: 663px;
    width: 455px;
    height: 159px;
    padding: 0 7px 8px;
    background: #040d0f;
}

.focusDetailEffect > strong {
    display: grid;
    place-items: center;
    width: 485px;
    height: 35px;
    margin: 0 0 0 -16px;
    padding: 4px 8px 0;
    box-sizing: border-box;
    overflow: hidden;
    font: 17px/30px "RuiZheng", "PingFang SC", sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background:
        url("./国策工作台素材/国策详情效果标题.webp")
        center / 392px 35px no-repeat;
}

.focusDetailEffect > textarea {
    position: absolute;
    left: 0;
    top: 34px;
    width: 455px;
    height: 125px;
    padding: 3px 7px 8px;
    overflow: auto;
    color: #a9d9c4;
    font-size: 11px;
    line-height: 1.42;
}

.focusConfirmDialog[hidden] {
    display: none;
}

.focusConfirmDialog {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.7);
}

.focusConfirmDialog > div {
    display: grid;
    width: min(420px, calc(100% - 30px));
    padding: 22px;
    box-sizing: border-box;
    border: 12px solid transparent;
    border-image: url("./assets/interface-ui/tile-window-border.webp") 18 fill / 12px / 0 stretch;
    background: #090f10;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.82);
}

.focusConfirmDialog strong {
    margin-top: 3px;
    color: #fff0f0;
    font: 21px/1.2 "WenHanJianZhu", "RuiZheng", sans-serif;
}

.focusConfirmDialog p {
    color: var(--focus-copy-muted);
    font-size: 11px;
    line-height: 1.55;
}

.focusConfirmDialog > div > span {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.componentDockHeaderActions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.componentDockMegaButton {
    min-height: 34px;
    padding: 3px 14px;
    border: 7px solid transparent;
    border-image: url("./assets/interface-ui/button-blue.webp") 7 14 fill / 7px 12px / 0 stretch;
    color: #f0f4f1;
    font-family: "WenHanJianZhu", "RuiZheng", sans-serif;
    background: #071313;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .focusWorkbenchBody {
        grid-template-columns: minmax(0, 1fr) 330px;
    }

    .focusWorkbenchHeader {
        grid-template-columns: auto minmax(180px, 1fr) 220px 110px;
    }

    .focusWorkbenchSaveStatus {
        display: none;
    }
}

@media (max-width: 900px) {
    .focusWorkbench {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .focusWorkbenchHeader {
        grid-template-columns: auto minmax(170px, 1fr) 110px;
        min-height: 68px;
    }

    .focusTreeMetaField:not(.focusTreeMetaField--tag) {
        display: none;
    }

    .focusWorkbenchBody {
        grid-template-columns: minmax(0, 1fr);
    }

    .focusInspectorToggleButton,
    .focusInspectorCloseButton {
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 4px 11px;
        box-sizing: border-box;
        border: 7px solid transparent;
        border-image: url("./assets/interface-ui/button-blue.webp") 8 12 fill / 7px 10px / 0 stretch;
        color: #f4ffff;
        font: 10px/1 "RuiZheng", "PingFang SC", sans-serif;
        white-space: nowrap;
        text-shadow: 0 1px #000;
        background: #061516;
        cursor: pointer;
        user-select: none;
    }

    .focusInspectorToggleInput {
        display: block;
    }

    .focusInspectorToggleButton {
        display: inline-flex;
        margin-left: auto;
    }

    .focusInspectorCloseButton {
        display: inline-flex;
        flex: 0 0 auto;
        min-width: 54px;
        border-image-source: url("./assets/interface-ui/button-medium.webp");
    }

    .focusInspectorToggleInput:focus-visible ~ .focusTreeStage .focusInspectorToggleButton {
        outline: 1px solid var(--focus-cyan-soft);
        outline-offset: 2px;
    }

    .focusInspector {
        position: absolute;
        right: 8px;
        top: 8px;
        bottom: 8px;
        width: min(340px, calc(100% - 42px));
        transform: translateX(calc(100% + 18px));
        visibility: hidden;
        pointer-events: none;
        transition:
            transform 180ms ease,
            visibility 0s linear 180ms;
    }

    .focusInspectorToggleInput:checked ~ .focusInspector {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .focusInspectorHeader {
        gap: 6px;
    }

    .focusInspectorHeader > span:first-child {
        min-width: 0;
    }

    .focusInspectorHeader strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 620px) {
    .focusWorkbenchHeader {
        grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
        grid-template-areas:
            "back heading"
            "tag tag";
        gap: 5px 7px;
        min-width: 0;
        min-height: 0;
        padding: 6px 8px 8px;
        overflow: hidden;
    }

    .focusWorkbenchBack {
        grid-area: back;
        min-width: 96px;
        padding-inline: 7px;
        font-size: 10px;
    }

    .focusWorkbenchHeading {
        grid-area: heading;
    }

    .focusWorkbenchTitleEditor {
        font-size: clamp(17px, 5.4vw, 22px);
    }

    .focusTreeMetaField--tag {
        grid-area: tag;
        width: 100%;
        height: 38px;
    }

    .focusTreeStage {
        border-width: 7px;
        border-image-width: 7px;
    }

    .focusTreeToolbar {
        gap: 4px;
        padding: 4px 5px;
    }

    .focusTreeToolbar button,
    .focusInspectorToggleButton {
        min-height: 32px;
        padding-inline: 7px;
        font-size: 9px;
    }

    .focusToolbarDivider {
        display: none;
    }

    .focusInspector {
        right: 6px;
        top: 6px;
        bottom: 6px;
        width: min(360px, calc(100% - 42px));
    }

    .focusInspectorHeader {
        min-height: 52px;
        padding-inline: 8px;
    }

    .focusCreateNext {
        left: 8px;
        min-width: min(310px, calc(100% - 132px));
        min-height: 54px;
        padding: 6px 13px 7px 10px !important;
        transform: none;
    }

    .focusCreateNext > img {
        width: 32px;
        height: 32px;
    }

    .focusCreateNext > strong {
        font-size: 15px;
    }

    #focusInspectorCoordinate {
        display: none;
    }

}

@media (max-width: 390px) {
    .focusWorkbenchHeader {
        grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
        padding-inline: 6px;
    }

    .focusWorkbenchBack {
        min-width: 90px;
    }

    .focusWorkbenchHeading small {
        display: none;
    }

    .focusTreeMetaField {
        gap: 4px;
        padding-inline: 6px;
    }

    .focusTreeMetaField span {
        font-size: 9px;
    }

    .focusTreeViewportHud {
        right: 6px;
        bottom: 6px;
        min-width: 112px;
        gap: 6px;
        padding-inline: 8px;
    }

    .focusTreeViewportHud span {
        display: none;
    }

    .focusCreateNext {
        right: 6px;
        bottom: 58px;
        width: auto;
        min-width: 0;
    }

    .focusCreateNext > small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .focusTreeNode[data-preview-state="current"] .focusTreeNodeIcon::before,
    .focusTreeNode[data-preview-state="current"] .focusTreeNodeIconShine {
        animation: none;
    }

    .focusTreeNode[data-preview-state="current"] .focusTreeNodeIconShine {
        opacity: 0.22;
        clip-path: none;
    }

    .focusDetailDialog[data-preview-state="current"] .focusDetailAura {
        animation: none;
    }
}