@charset "utf-8";
/* ============================================================
   mes.css —— 食枢平台前台共用样式（配合品牌皮肤）
   ============================================================ */

/* ---- 顶栏（小屏三段式：左标志 / 中站名 / 右用户） ---- */
.mes-top{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;border-bottom:1px solid #14283C;min-height:64px;padding:0;display:flex;align-items:center}
.mes-brand{display:flex;align-items:center;gap:10px;height:64px;padding-left:28px;font-size:17px;font-weight:700;letter-spacing:.04em;white-space:nowrap;color:#14283C}
.brand-mark{width:30px;height:30px;display:block;flex-shrink:0}
.mes-top .navbar-body{height:64px;flex:1;min-width:0}
.mes-top .navbar-right{height:100%;margin-left:auto;gap:0}
.mes-user{display:flex;align-items:center;gap:10px;height:64px;padding:0 24px 0 10px;cursor:pointer;transition:background-color .15s}
.mes-user:hover{background:#F1F4F7}
.mes-user .uname{font-weight:600}
.mes-burger{border:1px solid #14283C;background:#fff;width:36px;height:36px;cursor:pointer;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;flex-shrink:0;margin-left:12px}
.mes-burger i{display:block;width:16px;height:2px;background:#14283C}
.mes-side{position:fixed;top:57px;left:0;bottom:0;width:220px;background:#fff;border-right:1px solid #14283C;z-index:55;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto}
.mes-side.open{transform:none}
.mes-mask{display:none;position:fixed;inset:0;background:var(--ui-mask);z-index:54}
.mes-mask.open{display:block}
.mes-side .side-close{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border-bottom:1px solid #14283C;font-weight:700;letter-spacing:.1em}
.mes-side .side-close-x{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #14283C;background:#fff;cursor:pointer;font-size:16px;line-height:1}
.mes-side .side-close-x:hover{background:#14283C;color:#fff}
.mes-side .nav a{display:block;padding:13px 20px;color:#4C5C6B;font-size:14px;text-decoration:none}
.mes-side .nav a:hover{color:#14283C;background:#F1F4F7}
.mes-side .nav .active a{color:#14283C;font-weight:700;background:#E7F7F1;box-shadow:inset 4px 0 0 #16A67E}
.mes-side .side-foot{margin-top:auto;position:absolute;bottom:0;left:0;right:0;padding:14px 20px;border-top:1px solid #14283C;font-size:12px;color:#8C99A6;letter-spacing:.05em;text-align:center}

/* ---- 主体 ---- */
.mes-main{margin:0 auto;padding:104px 28px 40px;max-width:960px;min-height:100vh;animation:mesFade .3s ease}
@keyframes mesFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mes-hello{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.mes-hello h2{font-size:24px;font-weight:800;letter-spacing:.02em}
.mes-hello .mes-date{font-size:13px;color:#8C99A6;letter-spacing:.06em}

/* ---- 插件磁贴卡片（Windows 磁贴式：首字大方块，无图片） ---- */
.mes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mes-card{display:flex;flex-direction:column;border:1px solid #14283C;background:#fff;text-decoration:none;color:#14283C;transition:box-shadow .2s ease,transform .2s ease;position:relative}
.mes-card:hover{box-shadow:0 6px 20px rgba(20,40,60,.10);transform:translateY(-2px)}
.mes-card-tile{height:112px;background:#16A67E;color:#fff;display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:800;letter-spacing:.08em;border-bottom:1px solid #14283C;transition:opacity .15s}
.mes-card:hover .mes-card-tile{opacity:.88}
.mes-card .mes-flag{position:absolute;top:10px;right:10px;z-index:2}
.mes-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.mes-card-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.mes-card-name{font-size:15px;font-weight:700;letter-spacing:.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mes-card-ver{font-size:12px;color:#8C99A6;flex-shrink:0}
.mes-card-desc{font-size:12.5px;color:#4C5C6B;line-height:1.7;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mes-card-off .mes-card-tile{background:#F1F4F7;color:#8C99A6;border-bottom-color:#D3DBE3}
.mes-card-off .mes-card-name{color:#8C99A6}
.mes-empty{grid-column:1/-1;border:1px dashed #D3DBE3;padding:64px 20px;text-align:center;color:#8C99A6}
.mes-empty .icon{font-size:36px;display:block;margin-bottom:10px}

/* ---- 公告条 ---- */
.mes-notice{display:flex;align-items:center;gap:14px;border:1px solid #14283C;background:#fff;padding:12px 18px;margin-bottom:26px}
.mes-notice-title{flex:1;min-width:0;font-size:14px;color:#14283C;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mes-notice-title:hover{text-decoration:underline;text-underline-offset:3px}
.mes-notice-date{font-size:12px;color:#8C99A6;flex-shrink:0;letter-spacing:.05em}
.mes-notice-more{font-size:12.5px;color:#4C5C6B;text-decoration:none;flex-shrink:0;padding-left:14px;border-left:1px solid #E1E7ED}
.mes-notice-more:hover{color:#14283C;font-weight:600}

/* ---- 最近使用 ---- */
.mes-recent{margin-bottom:26px;display:none}
.mes-recent.show{display:block}
.mes-recent-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.mes-recent-label{font-size:12px;color:#8C99A6;letter-spacing:.2em}
/* 清空＝次要动作：不走 .button（mono 主题下 --ui-border 是纯黑，会和插件卡片抢视觉），做成无边框文字按钮 */
.mes-recent-clear{border:0;background:transparent;padding:0;font-size:12px;line-height:18px;color:#8C99A6;cursor:pointer;transition:var(--ui-tr-colors)}
.mes-recent-clear:hover{color:#14283C;text-decoration:underline;text-underline-offset:3px}
.mes-recent-clear:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}
/* 前台不加载 admin.css，气泡的尺寸/换行在这里自带一份，否则 .tooltip-text 的 nowrap 会拉成一条横杠；
   库里的 .tooltip-bottom 是居中对齐，而本行贴在内容右端，窄屏会顶出视口 → 改成右对齐，箭头挪到按钮上方 */
.mes-recent-tip{display:inline-flex;align-items:center}
.mes-recent-tip .tooltip-text{white-space:normal;width:240px;max-width:72vw;text-align:left;line-height:1.8;font-size:12px;font-weight:400;letter-spacing:normal;left:auto;right:0;transform:none}
.mes-recent-tip .tooltip-text::after{left:auto;right:9px;margin-left:0}
.mes-recent-row{display:flex;gap:10px;flex-wrap:wrap}
.mes-recent-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #14283C;padding:6px 14px 6px 6px;font-size:13px;background:#fff;text-decoration:none;color:#14283C;transition:var(--ui-tr-colors)}
.mes-recent-chip:hover{background:#14283C;color:#fff}
.mes-recent-chip .chip-tile{width:26px;height:26px;background:#0D7E5E;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.mes-recent-chip:hover .chip-tile{background:#fff;color:#0D7E5E}

/* ---- 用户设置 ---- */
.mes-narrow{width:100%;margin:0}
.mes-avatar{width:64px;height:64px;background:#14283C;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;flex-shrink:0}

/* ---- 页脚 ---- */
.mes-foot{margin-top:48px;padding:16px 0 8px;border-top:1px solid #14283C;text-align:center;font-size:12px;color:#8C99A6;letter-spacing:.06em}

/* ---- 登录页 ---- */
.login-shell{min-height:100vh;display:flex;background:#fff}
.login-hero{width:46%;background:linear-gradient(155deg,#14283C 0%,#0C1B29 100%);color:#fff;padding:60px 64px;display:none;flex-direction:column;justify-content:space-between;overflow-y:auto}
.hero-top{display:flex;flex-direction:column;align-items:center;text-align:center}
.login-hero .h-mark{width:52px;height:52px;display:block}
.hero-eyebrow{margin-top:44px;font-size:12px;letter-spacing:.32em;color:rgba(255,255,255,.45)}
.login-hero h1{font-size:44px;font-weight:800;letter-spacing:.05em;line-height:1.15;margin:18px 0 0}
.login-hero h1 .h1-sub{display:block;font-size:17px;font-weight:400;letter-spacing:.44em;color:rgba(255,255,255,.55);margin-top:16px;line-height:1}
.login-hero p{margin:28px 0 0;color:rgba(255,255,255,.6);font-size:14px;line-height:2;max-width:400px}
.hero-label{margin:48px 0 4px;font-size:12px;letter-spacing:.28em;color:rgba(255,255,255,.4)}
.hero-points{list-style:none;padding:0;margin:0;max-width:400px;text-align:left}
.hero-points li{display:flex;align-items:center;gap:14px;padding:14px 2px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);font-size:13.5px;letter-spacing:.05em}
.hero-points li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.hero-points li::before{content:"";width:7px;height:7px;background:#16A67E;flex-shrink:0}
.hero-foot{padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.4);font-size:12px;letter-spacing:.12em}
.login-pane{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;min-width:0}
.login-box{width:420px;max-width:100%}
.login-mark{width:46px;height:46px;display:block;flex-shrink:0}
.login-input{height:46px}

/* ---- 响应式（五档） ---- */
@media(min-width:992px){
  /* 顶栏两端与 960px 内容列对齐（用 margin，避免 a 标签盒占据左侧空白区） */
  .mes-brand{padding-left:0;margin-left:max(28px, calc((100vw - 960px) / 2 + 28px))}
  .mes-top .navbar-right{margin-right:max(0px, calc((100vw - 960px) / 2 + 4px))}
}
@media(min-width:992px){.login-hero{display:flex}}
@media(max-width:991px){
  .login-shell{justify-content:center}
  .login-box{width:100%;max-width:420px}
}
@media(max-width:1199px){.mes-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:991px){
  .mes-top{min-height:56px;flex-wrap:nowrap}
  .mes-brand{order:2;width:auto;flex:1;justify-content:center;height:56px;padding-left:0}
  .mes-brand .brand-text{display:none}
  .mes-burger{display:inline-flex;order:1}
  .mes-top .navbar-body{order:3;flex:0 0 auto;width:auto;margin:0;padding:0;height:56px;border-top:0;background:none;flex-wrap:nowrap;display:flex!important}
  .mes-user{height:56px;padding:0 12px 0 6px;gap:6px}
  .mes-user .uname{font-size:13px;max-width:5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .mes-main{padding:88px 16px 32px}
  .mes-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .mes-hello h2{font-size:20px}
}
@media(max-width:767px){
  .mes-grid{grid-template-columns:1fr}
}