@charset "utf-8";
/* ------------------------------------------------------------------
   蛋鸡饲料配方与营养测算软件 —— 全站样式
   手写 CSS，没有引 Bootstrap / Tailwind 那一套。后台就这么几个元素：
   表、表单、卡片、条图、环图，自己写反而省事，也不用为了改一个边距
   去翻框架文档。

   配色用的是蛋壳和蛋黄的色系：底色 #f7f4ec 是蛋壳的暖白，
   主色 #4a6b62 是鸭蛋壳那种青灰，强调色 #d99a2b 是蛋黄。
   2025.04.08 起（刘秀婷）
   2025.07.02 表格在 1280 屏下会挤出横向滚动条，把单元格内边距从 10 收到 8
   ------------------------------------------------------------------ */

:root{
    --ink:#2b2a26;
    --ink2:#5f5b52;
    --ink3:#948d7f;
    --line:#e6dfd2;
    --line2:#f0eade;
    --bg:#f7f4ec;
    --paper:#fffefa;
    --main:#4a6b62;
    --main-d:#33514a;
    --main-l:#e8efec;
    --yolk:#d99a2b;
    --yolk-l:#f8eed6;
    --bad:#b4523d;
    --bad-l:#f8e9e5;
    --ok:#4a7a52;
    --ok-l:#e9f2ea;
    --warn:#a97318;
    --warn-l:#fbf1dd;
    --r:4px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    background:var(--bg);
    color:var(--ink);
    font:13.5px/1.7 "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC",sans-serif;
    /* 蛋壳上的小斑点，极淡的一层，铺在整页背景上。别调深了，看表格会累 */
    background-image:radial-gradient(circle at 12% 18%, rgba(201,181,143,.16) 0 2px, transparent 2px),
                     radial-gradient(circle at 78% 62%, rgba(201,181,143,.13) 0 2px, transparent 2px),
                     radial-gradient(circle at 46% 86%, rgba(201,181,143,.10) 0 3px, transparent 3px);
    background-size:340px 340px, 460px 460px, 620px 620px;
}
a{color:var(--main-d);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0;font-weight:600;}
table{border-collapse:collapse;width:100%;}
input,select,textarea,button{font-family:inherit;font-size:13.5px;}

/* ---------- 顶条 ---------- */
.nx-top{
    height:58px;background:var(--paper);border-bottom:1px solid var(--line);
    display:flex;align-items:center;padding:0 20px;gap:14px;
    position:sticky;top:0;z-index:30;
}
.nx-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);}
.nx-logo svg{width:30px;height:36px;flex:none;}
.nx-logo b{font-size:15px;letter-spacing:.5px;display:block;line-height:1.25;}
.nx-logo i{font-style:normal;font-size:11px;color:var(--ink3);display:block;letter-spacing:1.5px;}
.nx-top .sp{flex:1;}
.nx-me{font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:10px;}
.nx-me .who{display:flex;align-items:center;gap:6px;}
.nx-me .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;}

/* ---------- 模块页签 ---------- */
.nx-nav{
    background:var(--paper);border-bottom:1px solid var(--line);
    display:flex;align-items:stretch;padding:0 20px;gap:2px;
    position:sticky;top:58px;z-index:29;overflow-x:auto;
}
/* 分组原来在第一个页签前面挂一个 10px 的小字（总览/配方/测算…），
   结果是"工作台"前面有小字、"配方设计"后面几个又没有，看着一高一低不齐。
   2025.08.26 起去掉小字，组与组之间只用一条细竖线隔开，九个页签一样平。 */
.nx-nav .grp{display:flex;align-items:center;flex:none;}
.nx-nav .grp .sep{width:1px;height:14px;background:var(--line);margin:0 5px;display:inline-block;}
.nx-nav a.tab{
    display:flex;align-items:center;gap:5px;padding:9px 11px;color:var(--ink2);
    border-bottom:2px solid transparent;font-size:13px;white-space:nowrap;flex:none;
}
/* 1000 出头的小屏上九个页签加五个分组标签排不下，分组文字先收起来，
   只留页签本身 —— 客户那台笔记本是 1366×768 的，一进系统就横向滚动太难看 */
@media (max-width:1180px){
    .nx-nav a.tab{padding:9px 9px;}
    .nx-nav{padding:0 12px;}
    .nx-nav .grp .sep{margin:0 3px;}
}
@media (max-width:940px){
    .nx-nav a.tab .nx-ic{display:none;}
    .nx-nav a.tab{font-size:12.5px;padding:8px 8px;}
}
.nx-nav a.tab:hover{color:var(--main-d);text-decoration:none;background:#fbf9f3;}
.nx-nav a.tab.on{color:var(--main-d);border-bottom-color:var(--main);font-weight:600;}
.nx-ic{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:0;opacity:.75;}

/* ---------- 主体 ---------- */
.nx-main{max-width:1280px;margin:0 auto;padding:18px 20px 44px;}
.nx-crumb{font-size:12px;color:var(--ink3);margin-bottom:10px;}
.nx-crumb a{color:var(--ink3);}
.nx-hd{display:flex;align-items:flex-end;gap:12px;margin:2px 0 14px;flex-wrap:wrap;}
.nx-hd h1{font-size:19px;letter-spacing:.3px;}
.nx-hd .sub{font-size:12px;color:var(--ink3);padding-bottom:2px;}
.nx-hd .sp{flex:1;}

/* 卡片 */
.nx-card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
    padding:14px 16px;margin-bottom:14px;
}
.nx-card > h3{
    font-size:14px;margin:-2px 0 10px;padding-bottom:8px;border-bottom:1px dashed var(--line);
    display:flex;align-items:center;gap:7px;
}
.nx-card > h3::before{
    content:"";width:9px;height:12px;flex:none;
    /* 小蛋形装饰，每个卡片标题前面一个 */
    border-radius:50% 50% 48% 48% / 62% 62% 38% 38%;
    background:var(--yolk-l);
    box-shadow:inset 0 -2px 0 rgba(217,154,43,.55);
}
.nx-card > h3 .sp{flex:1;}
.nx-card.pad0{padding:0;}

/* 蛋形 KPI 卡 */
.nx-eggs{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-bottom:16px;}
.nx-egg{
    position:relative;background:var(--paper);border:1px solid var(--line);
    padding:16px 16px 14px 20px;
    /* 卡片做成蛋形：上窄下圆。半径用椭圆百分比，四个角分开写 */
    border-radius:50% 50% 48% 48% / 34% 34% 22% 22%;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.nx-egg .k{font-size:12px;color:var(--ink3);letter-spacing:.3px;}
.nx-egg .v{font-size:25px;font-weight:600;line-height:1.25;color:var(--main-d);font-variant-numeric:tabular-nums;}
.nx-egg .v small{font-size:12px;font-weight:400;color:var(--ink2);margin-left:3px;}
.nx-egg .t{font-size:11.5px;color:var(--ink3);}
.nx-egg .spot{
    position:absolute;right:16px;top:14px;width:10px;height:12px;
    border-radius:50% 50% 48% 48% / 60% 60% 40% 40%;
    background:var(--yolk);opacity:.5;
}
.nx-egg.yolk{background:linear-gradient(180deg,#fffdf6,#fdf4e0);}
.nx-egg.mint{background:linear-gradient(180deg,#fdfefc,#eef4f1);}
.nx-egg.bad{background:linear-gradient(180deg,#fffdfc,#f9ece8);}

/* 表格 */
.nx-tb{width:100%;font-size:13px;}
.nx-tb th{
    text-align:left;font-weight:600;color:var(--ink2);background:#faf7f0;
    padding:8px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.nx-tb td{padding:7px 8px;border-bottom:1px solid var(--line2);vertical-align:middle;}
.nx-tb tbody tr:hover td{background:#fdfbf5;}
.nx-tb .num{text-align:right;font-variant-numeric:tabular-nums;}
.nx-tb .c{text-align:center;}
.nx-tb .nowrap{white-space:nowrap;}
.nx-tb tr.sum td{background:#faf7f0;font-weight:600;}
.nx-tb.compact td,.nx-tb.compact th{padding:5px 7px;font-size:12.5px;}

/* 标签 */
.nx-tag{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11.5px;line-height:1.6;white-space:nowrap;}
.nx-tag.ok{background:var(--ok-l);color:var(--ok);}
.nx-tag.bad{background:var(--bad-l);color:var(--bad);}
.nx-tag.warn{background:var(--warn-l);color:var(--warn);}
.nx-tag.i{background:var(--main-l);color:var(--main-d);}
.nx-tag.gray{background:#f1eee6;color:var(--ink2);}

/* 按钮 */
.nx-btn{
    display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:var(--r);
    border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;
    font-size:13px;line-height:1.5;text-decoration:none;
}
.nx-btn:hover{border-color:#d6cdb9;background:#fdfbf5;text-decoration:none;}
.nx-btn.main{background:var(--main);border-color:var(--main);color:#fff;}
.nx-btn.main:hover{background:var(--main-d);border-color:var(--main-d);}
.nx-btn.yolk{background:var(--yolk);border-color:var(--yolk);color:#fff;}
.nx-btn.yolk:hover{filter:brightness(.95);}
.nx-btn.sm{padding:3px 8px;font-size:12px;}
.nx-btn.danger{color:var(--bad);border-color:#e4c8c1;}
.nx-btn.danger:hover{background:var(--bad-l);}
.nx-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* 表单 */
.nx-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 18px;}
.nx-form .fi{display:flex;flex-direction:column;gap:4px;}
.nx-form .fi.wide{grid-column:1/-1;}
.nx-form label{font-size:12px;color:var(--ink2);}
.nx-form label b{color:var(--bad);font-weight:400;}
.nx-form input[type=text],.nx-form input[type=number],.nx-form input[type=password],.nx-form select,.nx-form textarea{
    padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
    width:100%;
}
.nx-form input:focus,.nx-form select:focus,.nx-form textarea:focus{
    outline:none;border-color:var(--main);box-shadow:0 0 0 2px rgba(74,107,98,.12);
}
.nx-form .hint{font-size:11.5px;color:var(--ink3);}
.nx-form .row-btns{grid-column:1/-1;display:flex;gap:8px;padding-top:4px;}
.nx-inline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

/* 提示条 */
.nx-msg{padding:8px 12px;border-radius:var(--r);margin-bottom:12px;font-size:13px;border:1px solid;}
.nx-msg.ok{background:var(--ok-l);border-color:#cfe2d2;color:#35603c;}
.nx-msg.bad{background:var(--bad-l);border-color:#eccfc8;color:#8d3f2e;}
.nx-msg.i{background:var(--main-l);border-color:#cfe0da;color:var(--main-d);}

/* 分页 */
.nx-pager{display:flex;align-items:center;gap:6px;padding:10px 2px 2px;font-size:12.5px;flex-wrap:wrap;}
.nx-pager a,.nx-pager b{
    min-width:26px;text-align:center;padding:2px 7px;border:1px solid var(--line);border-radius:3px;
    background:var(--paper);color:var(--ink2);font-weight:400;
}
.nx-pager b{background:var(--main);border-color:var(--main);color:#fff;}
.nx-muted{color:var(--ink3);font-size:12px;}

/* 进度条 */
.nx-bar{display:inline-block;width:86px;height:7px;background:#efeadd;border-radius:4px;overflow:hidden;vertical-align:middle;}
.nx-bar i{display:block;height:100%;background:var(--yolk);border-radius:4px;}
.nx-bar-main i{background:var(--main);}
.nx-bar-bad i{background:var(--bad);}

/* 图表 */
.nx-chart,.nx-radar,.nx-hbar{width:100%;height:auto;display:block;}
.nx-grid{stroke:#e9e3d6;stroke-width:1;}
.nx-tick{font-size:10px;fill:#948d7f;}
.nx-vlab{font-size:10px;fill:#5f5b52;}
.nx-ring{width:100%;height:auto;}
.nx-ringbig{font-size:22px;font-weight:600;fill:#33514a;}
.nx-ringsm{font-size:10px;fill:#948d7f;}

/* 图表区并排 */
.nx-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:900px){.nx-cols{grid-template-columns:1fr;}}

/* 明细表里的意见/评级 */
.nx-rate{font-size:12px;padding:2px 6px;border-radius:3px;}
.nx-rate.A{background:var(--ok-l);color:var(--ok);}
.nx-rate.B{background:var(--main-l);color:var(--main-d);}
.nx-rate.C{background:var(--warn-l);color:var(--warn);}
.nx-rate.D{background:var(--bad-l);color:var(--bad);}

/* 空状态 */
.nx-empty{padding:34px 10px;text-align:center;color:var(--ink3);font-size:13px;}
.nx-empty svg{width:44px;height:54px;opacity:.35;display:block;margin:0 auto 8px;}

/* 页脚 */
.nx-foot{
    max-width:1280px;margin:0 auto;padding:0 20px 26px;
    font-size:11.5px;color:var(--ink3);display:flex;gap:12px;flex-wrap:wrap;
}

/* 登录页。整页居中，左边一块蛋形的说明，右边表单 */
.nx-login{
    min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
    background:
        radial-gradient(1200px 420px at 50% -180px, #fdf3dc 0, transparent 60%),
        var(--bg);
}
.nx-login .box{
    width:100%;max-width:880px;background:var(--paper);border:1px solid var(--line);
    border-radius:10px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;
    box-shadow:0 10px 34px rgba(80,70,50,.07);
}
.nx-login .side{
    background:linear-gradient(160deg,#f4f7f4,#eef3f0);padding:34px 30px;
    border-right:1px solid var(--line);position:relative;
}
.nx-login .side h2{font-size:19px;color:var(--main-d);letter-spacing:.5px;}
.nx-login .side p{font-size:12.5px;color:var(--ink2);margin:10px 0 0;line-height:2;}
.nx-login .side .eggs{position:absolute;right:22px;bottom:18px;display:flex;gap:-6px;opacity:.9;}
.nx-login .side .eggs svg{width:34px;height:42px;margin-left:-10px;}
.nx-login .form{padding:34px 30px;}
.nx-login .form h3{font-size:16px;margin-bottom:16px;}
.nx-login .form .fi{margin-bottom:12px;display:flex;flex-direction:column;gap:5px;}
.nx-login .form input{
    padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
}
.nx-login .form input:focus{outline:none;border-color:var(--main);box-shadow:0 0 0 2px rgba(74,107,98,.12);}
.nx-login .form .nx-btn{width:100%;justify-content:center;padding:9px;}
@media (max-width:720px){.nx-login .box{grid-template-columns:1fr;}.nx-login .side{display:none;}}

/* 打印：配方单一张 A4，去掉导航和按钮 */
@media print{
    .nx-top,.nx-nav,.nx-foot,.nx-noprint{display:none!important;}
    body{background:#fff;background-image:none;font-size:12px;}
    .nx-main{padding:0;max-width:none;}
    .nx-card{border:0;padding:0;margin-bottom:10px;}
    .nx-tb th{background:#f2f2f2;}
}