/* ==========================================================================
   TableGIS /home/ 统一外壳（侧栏 + 底部插件宣传条 + 匿名反馈）
   全站唯一源：/home/ 首页、/home/<tool>/、/home/about/
   修改后所有页面重新生成/注入即生效。
   ========================================================================== */

/* ---------- 侧栏 ---------- */
.sidebar{width:220px;min-width:220px;background:#1a1a2e;display:flex;flex-direction:column;z-index:100;position:fixed;left:0;top:0;bottom:0;transition:transform .3s ease;overflow:visible}
.sidebar-header{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo{display:flex;align-items:center;gap:10px;color:#fff}
.sidebar-logo img{width:34px;height:34px;border-radius:50%}
.sidebar-logo-text{font-size:17px;font-weight:700;background:linear-gradient(135deg,#00d2ff,#7b2ff7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sidebar-subtitle{font-size:11px;color:rgba(255,255,255,.38);margin-top:4px;padding-left:44px;letter-spacing:.02em}
.sidebar-back{display:none}
.sidebar .sidebar-nav{flex:1;padding:6px 0 10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar .sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar .sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:2px}
.sidebar .nav-section{padding:13px 16px 4px;font-size:11px;font-weight:600;color:rgba(255,255,255,.36);letter-spacing:.09em}
.sidebar .nav-section:first-child{padding-top:8px}

/* 分组标题（可折叠） */
.sidebar .nav-grp{margin:5px 0 2px}
.sidebar .nav-group{display:flex;align-items:center;gap:6px;width:calc(100% - 16px);margin:0 8px;padding:6px 8px 6px 10px;border:0;border-radius:7px;background:transparent;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.52);letter-spacing:.05em;text-align:left;transition:background .15s,color .15s}
.sidebar .nav-group:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.sidebar .nav-group .grp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-group .grp-count{font-size:10px;font-weight:500;color:rgba(255,255,255,.3);letter-spacing:0}
.sidebar .nav-group .chev{width:11px;height:11px;flex-shrink:0;opacity:.45;transition:transform .22s ease}
.sidebar .nav-grp:hover .chev{opacity:.8}
.sidebar .nav-grp.collapsed .chev{transform:rotate(-90deg)}
.sidebar .nav-grp.collapsed .nav-items{display:none}
.sidebar .nav-items{overflow:hidden}

.sidebar .nav-item{display:flex;align-items:center;gap:12px;padding:9px 14px;margin:0 8px 2px;border-radius:8px;cursor:pointer;transition:all .2s;color:rgba(255,255,255,.65);font-size:14px;font-weight:500;position:relative;overflow:visible;text-decoration:none}
.sidebar .nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar .nav-item.active{background:linear-gradient(135deg,rgba(0,210,255,.15),rgba(123,47,247,.15));color:#fff;box-shadow:inset 0 0 0 1px rgba(0,210,255,.2)}
.sidebar .nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#00d2ff,#7b2ff7)}
.sidebar .nav-icon{width:18px;height:18px;flex-shrink:0;opacity:.7}
.sidebar .nav-item:hover .nav-icon,.sidebar .nav-item.active .nav-icon{opacity:1}
.sidebar .nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .tgis-badge{width:18px;height:18px;border-radius:3px;background:linear-gradient(135deg,#00d2ff,#7b2ff7);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
.sidebar .ext{width:12px;height:12px;margin-left:auto;opacity:.35;flex-shrink:0}
.sidebar .nav-item:hover .ext{opacity:.7}
.sidebar .nav-sub-item{display:block;padding:5px 14px 5px 30px;margin:0 8px 1px;border-radius:6px;transition:all .15s;color:rgba(255,255,255,.5);font-size:13px;position:relative;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-sub-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.sidebar .nav-sub-item.active{color:#00d2ff;background:rgba(0,210,255,.08)}
.sidebar .nav-sub-item.active::before{content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#00d2ff}

.sidebar-links{display:flex;gap:14px;justify-content:center;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}
.sidebar-links a{color:rgba(255,255,255,.45);transition:color .15s;text-decoration:none}
.sidebar-links a:hover{color:#00d2ff}
.sidebar .sidebar-footer{padding:10px 16px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.28);text-align:center;line-height:1.7}
.sidebar .sidebar-footer a{color:rgba(255,255,255,.38);text-decoration:none}
.sidebar .sidebar-footer a:hover{color:#00d2ff}

/* 桌面端没有 topbar（只在 ≤900 显示），页面自带的 56px 让位就变成顶部空白 */
@media(min-width:901px){
    .content{padding-top:0}
}

/* ---------- 移动端 ---------- */
@media(max-width:900px){
    .sidebar{transform:translateX(-100%);z-index:200;box-shadow:4px 0 20px rgba(0,0,0,.3)}
    .sidebar.open{transform:translateX(0)}
}

/* 侧栏是 fixed（脱离文档流），正文必须自己让出 220px，否则直链访问时被侧栏压住 */
@media(min-width:901px){
    .content{margin-left:220px}
}

/* ---------- 被 /home/ 用 iframe 套住时：外壳只留外层一份 ----------
   <head> 最前面的同步脚本会给顶层页面加 .top-level；没加 = 在 iframe 里。
   这样首帧就没有内层侧栏，不会出现「点菜单闪一下侧栏」。 */
html:not(.top-level) body .sidebar,
html:not(.top-level) body .topbar,
html:not(.top-level) body .sidebar-overlay,
html:not(.top-level) body .mobile-tabs{display:none!important}
html:not(.top-level) body .content,
html:not(.top-level) body .main{margin-left:0!important;width:auto;padding-top:0!important}

/* 兼容旧写法 */
html.in-iframe body .sidebar,
html.in-iframe body .topbar,
html.in-iframe body .sidebar-overlay,
html.in-iframe body .mobile-tabs{display:none!important}
html.in-iframe body .content,html.in-iframe body .main{margin-left:0;width:auto;padding-top:0}
/* 宣传条与反馈按钮由外层 /home/ 提供，内层不再重复 */
html.in-iframe body .tk-promo,
html.in-iframe body .tk-fb{display:none!important}

/* ---------- 底部插件信息条 ----------
   低位信息条：40px 高，左侧标记与右侧按钮都做弱化，不做撞色渐变、不做投影，
   避免读起来像广告位。 */
.tk-promo{position:fixed;left:220px;right:0;bottom:0;z-index:120;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);border-top:1px solid #eef1f5;transform:translateY(0);transition:transform .24s ease}
html.in-iframe .tk-promo{left:0}
.tk-promo.off{transform:translateY(110%)}
.tk-promo-in{max-width:960px;margin:0 auto;padding:0 20px;height:40px;display:flex;align-items:center;gap:10px}
.tk-promo-badge{height:16px;padding:0 5px;border-radius:3px;background:#f2f4f7;color:#a0a8b5;font-size:9px;font-weight:600;letter-spacing:.05em;display:inline-flex;align-items:center;flex-shrink:0}
.tk-promo-text{flex:1;min-width:0;font-size:12px;color:#939bab;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-promo-text b{color:#5f6a79;font-weight:500}
.tk-promo-extra{color:#2b323c;font-weight:600}
.tk-promo-btn{flex-shrink:0;height:24px;padding:0 11px;border:1px solid #2b323c;border-radius:6px;background:#2b323c;color:#fff;font-size:11.5px;line-height:22px;text-decoration:none;transition:background .15s,border-color .15s}
.tk-promo-btn:hover{background:#39424f;border-color:#39424f;color:#fff}
.tk-promo-x{flex-shrink:0;width:22px;height:22px;border:0;border-radius:5px;background:transparent;color:#c2c9d3;font-size:15px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.tk-promo-x:hover{background:#f4f6f9;color:#7a8493}
body.tk-promo-on{padding-bottom:0}
body.tk-promo-on .content,body.tk-promo-on #homeView{padding-bottom:40px}
body.tk-promo-on .footer{padding-bottom:64px}
/* 窄屏放不下时先舍掉补充句，主句保持完整 */
@media(max-width:1100px){.tk-promo-extra{display:none}}

/* ---------- 匿名反馈 ----------
   默认直接摊开成一张小卡片：标题 + 输入框 + 发送，不藏在气泡图标后面。
   收起后留一个小胶囊，随时能点回来。 */
.tk-fb{position:fixed;right:14px;bottom:52px;z-index:130;font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif}
.tk-fb.low{bottom:14px}
.tk-fb-card{width:176px;background:#fff;border:1px solid #e9edf3;border-radius:12px;box-shadow:0 10px 28px rgba(16,24,40,.08);padding:11px 12px}
.tk-fb.min .tk-fb-card{display:none}
.tk-fb-hd{display:flex;align-items:baseline;gap:6px;margin-bottom:7px}
.tk-fb-hd b{font-size:12.5px;color:#2b323c;font-weight:600;letter-spacing:.01em}
.tk-fb-hd span{flex:1;min-width:0;font-size:10.5px;color:#a8b0bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-fb-hd button{border:0;background:transparent;color:#c2c9d3;font-size:15px;line-height:1;cursor:pointer;padding:0 2px;border-radius:4px}
.tk-fb-hd button:hover{background:#f4f6f9;color:#7a8493}
.tk-fb textarea{display:block;width:100%;height:86px;resize:none;border:1px solid #e4e9f0;border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.6;color:#1f2937;background:#fbfcfd;outline:none;font-family:inherit;box-sizing:border-box;transition:border-color .15s,background .15s}
.tk-fb textarea:focus{border-color:#c8d4e4;background:#fff;box-shadow:0 0 0 3px rgba(31,41,55,.05)}
.tk-fb textarea::placeholder{color:#aab2be}
.tk-fb-ft{display:flex;flex-direction:column;align-items:stretch;gap:7px;margin-top:8px}
.tk-fb-note{font-size:10.5px;color:#a8b0bc;line-height:1.35}
.tk-fb-send{height:28px;width:100%;padding:0;border:0;border-radius:7px;background:#252c36;color:#fff;font-size:12.5px;font-weight:500;cursor:pointer;transition:background .15s}
.tk-fb-send:hover{background:#39424f}
.tk-fb-send:disabled{opacity:.55;cursor:default}
.tk-fb-ok{font-size:11.5px;color:#0a9e6a;margin-top:7px;display:none}
.tk-fb-ok.on{display:block}
.tk-fb-pill{display:none;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid #e4e9f0;border-radius:999px;background:#fff;color:#7c8695;font-size:12px;font-family:inherit;cursor:pointer;box-shadow:0 4px 14px rgba(16,24,40,.07);transition:border-color .15s,color .15s}
.tk-fb-pill:hover{border-color:#d3dae4;color:#39424f}
.tk-fb-pill svg{width:13px;height:13px;opacity:.75}
.tk-fb.min .tk-fb-pill{display:inline-flex}

/* 关于页里的内联反馈表单 */
.fb-inline{background:#fff;border:1px solid #e9edf3;border-radius:12px;padding:14px}
.fb-inline textarea{display:block;width:100%;height:84px;resize:vertical;border:1px solid #e4e9f0;border-radius:9px;padding:9px 11px;font-size:13px;line-height:1.65;color:#1f2937;background:#fbfcfd;outline:none;font-family:inherit;box-sizing:border-box;transition:border-color .15s,background .15s}
.fb-inline textarea:focus{border-color:#c8d4e4;background:#fff;box-shadow:0 0 0 3px rgba(31,41,55,.05)}
.fb-inline textarea::placeholder{color:#aab2be}
.fb-inline-ft{display:flex;align-items:center;gap:10px;margin-top:10px}
.fb-inline-note{flex:1;font-size:12px;color:#a8b0bc}
.fb-inline-send{flex-shrink:0;height:32px;padding:0 18px;border:0;border-radius:8px;background:#252c36;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s}
.fb-inline-send:hover{background:#39424f}
.fb-inline-send:disabled{opacity:.55;cursor:default}
.fb-inline-ok{display:none;font-size:12px;color:#0a9e6a;margin-top:8px}
.fb-inline-ok.on{display:block}

@media(max-width:900px){
    .tk-promo{left:0}
    .tk-fb{right:12px;bottom:50px}
    .tk-fb-card{width:min(176px,calc(100vw - 24px))}
}
@media(max-width:560px){
    .tk-promo-in{height:38px;padding:0 12px;gap:8px}
    .tk-promo-text{font-size:11.5px}
    .tk-promo-badge{display:none}
}