@font-face {
    font-family: 'TsangerYuYangT03';
    src: url('./lib/TsangerYuYangT-W03.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* ================= 统一盒模型 ================= */
* {
    box-sizing: border-box;
}
/* ================= 滚动条 ================= */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: #eef2f8;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8fb8e8, #5f8fd6);
    border-radius: 10px;
    border: 3px solid #eef2f8;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6f9fd9, #3f6fc0);
}
/* ================= 基础容器 ================= */
html, body, .joint-app {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    user-select: none;
    font-family: TsangerYuYangT03, sans-serif, Arial;
    overflow: hidden;
    display: block;
    background: #e9eef6;
}
/* ================= 顶栏（高220px） ================= */
.app-header {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(120deg, #f4f8ff 0%, #eef3fc 100%);
    box-shadow: 0 2px 10px rgba(60, 90, 130, .12);
}
.app-body {
    position: relative;
    height: calc(100% - 220px);
}
/* ================= 小地图 380×220 ================= */
.mini-map {
    display: inline-block;
    width: 380px;
    height: 220px;
    padding: 0;
    background: #ffffff;
    border-right: 1px solid #d6e0ee;
    overflow: hidden;
}
.mini-map-head {
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 15px;
    color: #2b4f82;
    font-weight: bold;
    background: #e6eefb;
    border-bottom: 1px solid #d3e0f1;
}
#mini-paper {
    height: calc(100% - 38px);
}
#mini-resize {
    position: absolute;
    right: 6px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    border-radius: 100%;
    border: 2px solid #31d0c6;
    background-color: #fff;
    z-index: 30;
    transform: scale(1);
}
/* ================= 标题 & 工具栏 left:380px ================= */
.title-container {
    display: inline-block;
    position: absolute;
    height: 100%;
    left: 380px;
    right: 0;
    background: linear-gradient(180deg, #f0f6ff 0%, #e7eef9 100%);
    z-index: 10;
    overflow: auto;
    padding: 14px 20px;
}
.app-brand {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.app-brand-icon {
    font-size: 26px;
}
.app-brand-text {
    font-size: 22px;
    font-weight: bold;
    color: #1d3f6e;
    letter-spacing: 1px;
}
.panel-label {
    font-size: 16px;
    font-weight: bold;
    color: #2f5c95;
    margin: 16px 0 8px;
    padding-left: 8px;
    border-left: 4px solid #3f7fd0;
    line-height: 20px;
}
/* ================= 通用按钮 ================= */
.w3-btn {
    border-radius: 12px !important;
    border: none;
    box-shadow: 0 3px 6px rgba(45, 80, 130, .14);
    transition: all .18s ease;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 0;
    line-height: 1.6;
}
.w3-btn:hover {
    box-shadow: 0 8px 18px rgba(45, 80, 130, .24);
    transform: translateY(-3px);
    filter: brightness(1.04);
}
.w3-btn:active {
    transform: translateY(0);
    filter: brightness(.96);
    box-shadow: 0 2px 5px rgba(45, 80, 130, .18);
}
.w3-light-green { background: linear-gradient(180deg, #86e29b, #57c97b) !important; color: #0c3f22 !important; }
.w3-hover-green:hover { background: linear-gradient(180deg, #6fd88c, #3fba65) !important; color: #fff !important; }
.w3-light-blue { background: linear-gradient(180deg, #8cc3f5, #5e9fe6) !important; color: #0b2d57 !important; }
.w3-hover-blue:hover { background: linear-gradient(180deg, #72b1ee, #3f84d1) !important; color: #fff !important; }
.w3-yellow { background: linear-gradient(180deg, #ffd968, #ffb832) !important; color: #4a3100 !important; }
.w3-hover-deep-orange:hover { background: linear-gradient(180deg, #ffc14e, #f98f1c) !important; color: #fff !important; }
.btn-primary {
    box-shadow: 0 4px 10px rgba(50, 90, 140, .28);
    font-size: 17px;
}
/* ================= 输入控件 ================= */
textarea, .w3-input, .w3-twothird {
    border-radius: 12px;
    border: 1px solid #c3d2e8;
    background: #ffffff;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 16px;
    box-shadow: inset 0 1px 2px rgba(50, 80, 120, .06);
    transition: border-color .15s, box-shadow .15s;
}
textarea:focus, .w3-input:focus, .w3-twothird:focus {
    outline: none;
    border-color: #3f7fd0;
    box-shadow: 0 0 0 4px rgba(63, 127, 208, .18);
}
::placeholder {
    color: #9fb0c8;
}
#ReversePol, #myModel {
    line-height: 1.6;
    resize: vertical;
}
/* ================= 左侧分割栏 ================= */
.left-container {
    position: absolute;
    left: 6px;
    top: 0;
    width: 14px;
    height: 100%;
    overflow: auto;
    background: linear-gradient(180deg, #3f4f6b, #2b3750);
    z-index: 10;
}
/* ================= 主画布容器 按表：left:8px，right:366px，top:0，bottom:195px ================= */
.main-container {
    position: absolute;
    top: 0;
    left: 8px;
    right: 366px;
    bottom: 195px;
    overflow: hidden;
    border: 2px solid #6f93c9;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(80, 100, 40, .12);
}
.main-container-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    line-height: 38px;
    padding-left: 12px;
    font-size: 15px;
    font-weight: bold;
    color: #23517f;
    background: linear-gradient(180deg, #e7f0fc, #d9e7f9);
    border-bottom: 1px solid #c4d7ee;
    border-radius: 12px 12px 0 0;
    z-index: 3;
}
#paper-container {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    bottom: 0;
}
#paper {
    width: 100%;
    height: 100%;
}
/* ================= 拖动分割把手 #app-resize right:360px bottom:185px ================= */
#app-resize {
    position: absolute;
    top: 0;
    width: 6px;
    right: 360px;
    bottom: 185px;
    background: #cbd5e0;
    border-radius: 3px;
    cursor: ew-resize;
    z-index: 689;
}
#app-resize:hover {
    background: #3f7fd0;
}
/* ================= 右侧面板 right-container：宽360px right:0 bottom:185px ================= */
.right-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    bottom: 185px;
    border-left: 1px solid #d3d9e8;
    overflow: auto;
    background: linear-gradient(180deg, #f8f5ff, #efeaff);
    padding: 14px;
    border-radius: 0;
    box-shadow: -2px 0 10px rgba(100, 80, 140, 0.08);
}
.right-container .w3-row {
    margin-bottom: 14px;
}
.right-container .w3-row .w3-third {
    font-size: 15px;
    color: #4a3a7a;
    line-height: 1.6;
}
.right-container textarea#ERMemo {
    min-height: 120px;
}
/* ================= 说明卡片 help-card ================= */
.help-card {
    margin-top: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e0d7f5;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(100,80,140,.07);
}
.help-title {
    font-size: 16px;
    font-weight: bold;
    color: #6a4fae;
    margin: 0 0 8px;
    border-bottom: 1px solid #ece5fb;
    padding-bottom: 6px;
}
.help-title:first-child {
    margin-top: 0;
}
.help-card p {
    margin: 8px 0;
    font-size: 14px;
    color: #44405a;
    line-height: 1.7;
}
.help-card ul {
    margin: 4px 0 4px 20px;
    padding: 0;
}
.help-card li {
    font-size: 14px;
    color: #44405a;
    line-height: 1.7;
}
.help-card code {
    font-family: Consolas, Monaco, monospace;
    background: #f1ecfb;
    color: #6a3fb0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.help-tip {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fdf7e8;
    border-left: 3px solid #f0a92e;
    border-radius: 6px;
    color: #7a5a1a;
    font-size: 14px;
    line-height: 1.6;
}
/* ================= 底部状态栏 bottom-container：left:6px right:0 bottom:0 height:185px ================= */
.bottom-container {
    position: absolute;
    left: 6px;
    right: 0;
    bottom: 0;
    height: 185px;
    background: linear-gradient(180deg, #1f2b40, #17202f);
    z-index: 92;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    box-shadow: 0 -2px 10px rgba(30,40,60,.20);
}
#status {
    margin: 0;
    font-size: 15px;
    color: #b6cfe9;
    letter-spacing: 0.5px;
}

 /* ================= UI 美化增强层（追加，不改原有布局定位）
  ================= */

    /* 全局：统一盒模型、柔和背景 */
    body {
        background: #e9eef6;
    }

    /* 顶栏工具区：圆角卡片 + 柔光 */
    .app-header {
        box-shadow: 0 4px 16px rgba(60, 90, 130, .12);
    }
    .title-container {
        background: linear-gradient(180deg, #f0f6ff 0%, #e7eef9 100%);
    }

    /* 面板标题：左侧色条 */
    .panel-label {
        color: #2f5c95;
        border-left: 4px solid #3f7fd0;
        padding-left: 8px;
    }

    /* 按钮：统一圆角 + 悬停上浮 */
    .w3-btn {
        border-radius: 12px !important;
        border: none;
        box-shadow: 0 3px 8px rgba(45, 80, 130, .14);
        transition: all .18s ease;
    }
    .w3-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(45, 80, 130, .22);
    }
    .w3-btn:active {
        transform: translateY(0);
    }

    /* 输入控件：圆角 + 聚焦光圈 */
    textarea, .w3-input, .w3-twothird {
        border-radius: 10px;
        border: 1px solid #c3d2e8;
        box-shadow: inset 0 1px 2px rgba(50, 80, 120, .06);
        transition: border-color .15s, box-shadow .15s;
    }
    textarea:focus, .w3-input:focus, .w3-twothird:focus {
        outline: none;
        border-color: #3f7fd0;
        box-shadow: 0 0 0 4px rgba(63, 127, 208, .18);
    }
    ::placeholder {
        color: #9fb0c8;
    }

    /* 画布区：白色卡片 + 圆角边框 */
    .main-container {
        background: #ffffff;
        border: 2px solid #d0d9e8;
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(40, 60, 100, .08);
    }

    /* 右侧检查器：淡紫卡片 */
    .right-container {
        background: linear-gradient(180deg, #f8f5ff 0%, #efeaff 100%);
        border: 2px solid #d9cdf1;
        border-radius: 14px;
        box-shadow: 0 2px 12px rgba(70, 50, 120, .1);
        padding: 16px;
    }

    /* 操作说明卡片 */
    .help-card {
        background: #ffffff;
        border: 1px solid #e0d7f5;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(80, 60, 130, .08);
        padding: 16px;
    }
    .help-title {
        color: #6a4fae;
        font-weight: bold;
        border-bottom: 2px solid #ece5fb;
        padding-bottom: 8px;
        margin-top: 14px;
    }
    .help-title:first-child {
        margin-top: 0;
    }
    .help-card p,
    .help-card li {
        color: #44405a;
        line-height: 1.7;
    }
    .help-card code {
        background: #f1ecfb;
        color: #6a3fb0;
        padding: 2px 6px;
        border-radius: 6px;
    }
    .help-tip {
        background: #fdf7e8;
        border-left: 4px solid #f0a92e;
        border-radius: 6px;
        color: #7a5a1a;
        padding: 10px 12px;
    }

    /* 底部状态栏 */
    .bottom-container {
        background: linear-gradient(180deg, #1f2b40 0%, #17202f 100%);
        border-radius: 10px 12px 0 0;
    }
    #status {
        color: #b6cfe9;
    }

    /* 滚动条美化 */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #eef2f8;
    }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #8fb8e8 0%, #5f8fd6 100%);
        border-radius: 10px;
        border: 2px solid #eef2f8;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #6f9fd9 0%, #3f6fc0 100%);
    }