/* portal.css：JROAD 订单门户所有页面共用的样式表 */
/* 由 resources/views/layout.blade.php 加载（以文件修改时间作为版本号防止缓存）；与 public/portal.js 配合使用。 */
/* 文件结构：前 2 行是最初的压缩写法（基础样式与各画面样式、响应式），之后按功能逐段追加； */
/* 后面的规则会覆盖前面的同名规则，因此不能随意调整顺序。手机端修正规则必须保持在文件最后。 */

/* ==== 全局变量与基础样式 ==== */
/* :root 中定义全站使用的颜色变量（CSS 变量），后文用 var(--xxx) 引用；文件后半部分的浅色配色层会重新定义其中几项。 */
:root{
/* --ink：主文字颜色（深墨绿近黑） */
--ink:#20241a;
/* --muted：次要文字颜色（灰色，用于说明、标签） */
--muted:#7d8172;
/* --green：品牌主色（深橄榄绿，按钮、链接、焦点框） */
--green:#4b5a22;
/* --lime：强调色（黄绿色，侧边栏选中项、品牌字母） */
--lime:#c4d47c;
/* --line：边框与分隔线颜色 */
--line:#e5e6da;
/* --bg：页面背景色（浅米灰） */
--bg:#f5f6f0;
/* --nav：侧边栏背景色（深绿） */
--nav:#272d1b}
/* 基础元素样式：盒模型、正文字体字号行高、链接、表单控件、标题、标签、复选框等 */
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:14px/1.65 'Segoe UI','Yu Gothic UI','Microsoft YaHei',sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}h1,h2,h3,p{margin-top:0}h1{font-size:30px;letter-spacing:-.8px;line-height:1.3;margin-bottom:0}h2{font-size:17px;letter-spacing:-.3px;margin-bottom:20px}h3{font-size:16px;margin-bottom:5px}small{display:block;color:var(--muted);font-size:12px}label{display:block;color:#485960;font-size:14px;margin-bottom:17px}input,select,textarea{display:block;width:100%;border:1px solid #dbded7;border-radius:7px;background:white;color:var(--ink);padding:11px 12px;margin-top:7px;min-height:43px}input:focus,select:focus,textarea:focus{border-color:var(--green);outline:2px solid #4b5a2222}input:disabled{background:#f4f5f2}textarea{min-height:85px;resize:vertical}select[multiple]{min-height:64px}input[type=checkbox]{width:18px;min-height:18px;margin:0;accent-color:var(--green)}

/* ==== 侧边栏（左侧固定导航）==== */
/* 包括顶部图片、品牌名 JROAD、导航分组标题、导航链接（当前页 active 高亮）、底部环境信息 */
.sidebar{position:fixed;width:226px;inset:0 auto 0 0;background:var(--nav);color:#c9d0bf;padding:22px 14px 16px;z-index:10;display:flex;flex-direction:column}.sidebar-hero{display:block;position:relative;flex:none;margin:-22px -14px 14px;overflow:hidden}.sidebar-hero img{display:block;width:100%;height:120px;object-fit:cover;object-position:50% 100%}.sidebar-hero:before{content:"";position:absolute;inset:0 0 auto;height:30px;background:linear-gradient(180deg,var(--nav),#0000);z-index:1}.sidebar-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 65%,var(--nav))}.brand{font-size:25px;font-weight:900;letter-spacing:-1.2px;color:white;line-height:1;padding-left:4px}.brand span{color:var(--lime)}.brand-caption{font-size:9px;letter-spacing:2.5px;color:#a0a895;margin:10px 0 28px 1px}.nav-label{font-size:10px;color:#919b83;letter-spacing:1px;padding:14px 12px 7px}.nav-link{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:7px;margin-bottom:2px;font-weight:500;font-size:13px;line-height:1.4}.nav-link:hover{background:#303b23}.nav-link.active{background:var(--lime);color:#28311a;font-weight:700}.nav-icon{width:18px;font-size:17px;line-height:1;flex-shrink:0}.sidebar-bottom{margin-top:auto;border-top:1px solid #ffffff15;padding:14px 10px 0;font-size:11px}.sidebar-bottom small{margin-top:3px;padding-left:13px;color:#859076;font-size:10px}.green-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:var(--lime);margin-right:6px}

/* ==== 主区域 ==== */
/* 登录后的页面主体向右让出侧边栏的宽度 226px */
.portal .main{margin-left:226px}

/* ==== 顶部栏 ==== */
/* 面包屑导航、右侧操作区（语言切换、头像、用户名、退出按钮） */
.topbar{height:77px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:15px}.breadcrumb{font-size:12px;color:#7e8476}.breadcrumb span{margin:0 13px;color:#c7cac1}.top-actions{display:flex;align-items:center;gap:13px}.top-actions select{margin:0;border:0;background:#f7f8f6;min-height:33px;padding:5px 10px;font-size:12px}.avatar{width:30px;height:30px;border-radius:50%;background:#e8eae3;color:#525f38;text-align:center;line-height:30px;font-size:12px;font-weight:700}.user-name{font-size:12px}.text-button{background:none;border:0;color:var(--muted);padding:5px;font-size:12px}

/* ==== 内容区 ==== */
/* 页面正文区域的内边距与最大宽度 */
.content{padding:27px 36px 15px;max-width:1680px;margin:auto}

/* 环境提示行：environment-tag（目前未使用） */
.environment{font-size:12px;color:#6f7464;display:flex;align-items:center;gap:9px;margin-bottom:27px}.environment-tag{font-size:9px;letter-spacing:1px;background:#e6edde;border:1px solid #c8d8b9;padding:1px 5px;border-radius:3px;color:#517432}

/* ==== 接続設定・API ログ（管理员接口画面）==== */
/* 分步骤卡片、请求/响应原文显示 */
.probe-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}.probe-step{border:1px solid var(--line);border-radius:8px;padding:16px}.probe-step strong{display:block;margin-bottom:8px}.probe-step form{margin-top:10px}.probe-io pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;background:#f7f8f6;padding:10px;border-radius:6px;max-height:260px;overflow:auto}@media(max-width:1150px){.probe-steps{grid-template-columns:1fr}}

/* 折叠的高级设置（details/summary，展开时箭头变为向下）、次要操作链接、行内表单 */
.advanced{margin-top:28px}.advanced>summary{cursor:pointer;font-size:13px;color:#4c5243;padding:12px 0;list-style:none;border-top:1px solid var(--line)}.advanced>summary:before{content:'▸ ';color:var(--green)}.advanced[open]>summary:before{content:'▾ '}.secondary-actions{font-size:12px;margin:-8px 0 24px}.secondary-actions a{color:var(--green)}.secondary-actions .text-button{font-size:12px}.inline-form{display:inline}.inline-form .text-button{padding:0;color:var(--green)}.inline-account{margin-top:14px;max-width:760px}
/* 真实模式时环境标签显示为蓝色 */
.environment.live .environment-tag{background:#dcecf7;border-color:#a9c9e0;color:#215a86}

/* ==== 页面标题区 ==== */
/* 标题、右侧主要操作按钮（heading-cta，如新建订单）、标题上方的小字（eyebrow） */
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 29px}.heading-main{display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-width:0}.heading-cta{min-height:46px;padding:12px 24px;font-size:14px;box-shadow:0 3px 10px #4b5a222e}.heading-cta:hover{box-shadow:0 4px 14px #4b5a2240}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#868b7d;margin-bottom:12px}.eyebrow span{margin-left:12px;letter-spacing:1px}

/* ==== 按钮 ==== */
/* button 基础样式；primary 主按钮（绿底白字）、secondary 次按钮（白底）、ghost 透明按钮、danger 危险操作（红色）、full 占满整行 */
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;border-radius:6px;padding:10px 17px;border:1px solid transparent;font-size:13px;font-weight:600;white-space:nowrap}.primary{background:var(--green);color:#fff}.primary:hover{background:#3b4818}.secondary{background:white;border-color:#e0e2dd;color:#4c5243}.secondary:hover{background:#f1f3ed}.ghost{background:transparent;border-color:#d5d9cf;color:#4c573a}.danger{background:#fff3f1;border-color:#ecd3ce;color:#a44134}.full{width:100%}.button-row{display:flex;gap:10px;flex-wrap:wrap}

/* ==== 统计卡片 ==== */
/* 仪表盘顶部的数字卡片（每行 4 张），底部彩色细线按订单状态区分颜色：pending 待处理、shipped 已发货、delivered 已送达 */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:19px;margin-bottom:26px}.stat{position:relative;overflow:hidden;background:white;border:1px solid var(--line);border-radius:9px;padding:21px 22px 25px}.stat-label{color:#767b6e;display:flex;align-items:center;justify-content:space-between;font-size:12px}.stat-label span{width:27px;height:27px;line-height:27px;text-align:center;background:#f2f3ee;border-radius:6px;color:#7a8468;font-size:16px}.stat strong{font-size:37px;font-weight:600;letter-spacing:-1px;line-height:1.5}.stat-line{height:3px;position:absolute;bottom:0;left:22px;right:22px;background:#cbd4ba}.stat-line.pending{background:#ebcd85}.stat-line.shipped{background:#a6c7d7}.stat-line.delivered{background:#add389}

/* ==== 面板（白色卡片容器）与仪表盘布局 ==== */
.panel{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:24px}.panel-heading{padding:22px 23px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-heading h2{margin:0}.panel-heading a{font-size:11px;color:var(--green)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(240px,1fr);gap:24px}

/* ==== 表格 ==== */
/* 表格外层可横向滚动；表头、单元格、最后一行无下边框 */
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:11px;color:#8a8f81;background:#fafbf9;font-weight:500;padding:12px 19px;border-bottom:1px solid var(--line)}td{padding:17px 19px;border-bottom:1px solid #f1f2ee;font-size:12px}tr:last-child td{border-bottom:0}td a:hover{color:var(--green)}

/* 文字工具类与状态徽章：mono 等宽字体（订单号、SKU）、muted 灰色文字、badge 订单状态标签、counter 数量角标 */
.mono{font-family:Consolas,monospace;font-size:12px;letter-spacing:-.2px}.muted{color:var(--muted)}.badge{display:inline-block;background:#fff5d9;color:#987630;padding:3px 8px;font-size:10px;border-radius:4px;white-space:nowrap}.badge.delivered,.badge.shipped{background:#eff2e8;color:#6f814b}.badge.cancelled{background:#f0f1ef;color:#7e8179}.counter{font-size:10px;background:#faf0de;color:#ac8245;border-radius:5px;padding:2px 8px}

/* ==== 仪表盘库存不足列表 ==== */
.stock-row{display:flex;gap:11px;align-items:center;padding:16px 22px;border-top:1px solid #f2f3f0}.stock-row strong{font-size:11px}.stock-row small{font-size:10px}.stock-row b{margin-left:auto;color:#b17b39;font-size:18px;font-weight:500}.part-icon{background:#f4f5f1;color:#8f997e;width:34px;height:34px;line-height:34px;text-align:center;border-radius:6px}
/* 面板底部的查看全部链接 */
.panel-link{display:block;text-align:center;padding:12px;border-top:1px solid var(--line);font-size:11px;color:var(--green)}

/* ==== 接口连接状态卡片（仪表盘上显示与仓库系统的连接说明）==== */
.connection-card{background:#eef0ea;display:flex;align-items:center;gap:19px;border:1px solid #dfe2d8;padding:20px 25px;border-radius:9px;margin-bottom:24px}.connection-card h3{font-size:14px}.connection-card p{font-size:12px;color:#7d8173;margin:0;max-width:780px}.connection-card .button{margin-left:auto;font-size:11px}.connection-icon{width:42px;height:42px;background:#e4e7dc;color:#757d5e;border-radius:8px;text-align:center;line-height:42px;font-size:23px;flex-shrink:0}

/* ==== 页脚 ==== */
footer{display:flex;justify-content:space-between;color:#a9ada3;font-size:10px;padding:26px 0 13px;border-top:1px solid var(--line);margin-top:30px;letter-spacing:1px}

/* ==== 工具栏（列表页上方的搜索框和筛选下拉框）==== */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:22px}.toolbar input{max-width:500px;margin:0}.toolbar select{margin:0;width:auto}.toolbar label{margin:0;min-width:250px}.toolbar label select{width:100%}

/* ==== 商品目录 ==== */
/* 商品卡片网格；product-art 为商品图片区，没有照片时用 CSS 画出的零件示意图（mechanical-part、part-1、part-2）代替 */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.product-card{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}.product-art{height:168px;background:linear-gradient(135deg,#eceee9,#f5f7f4);padding:18px;position:relative;overflow:hidden}.product-art>span{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#8e9284}.product-art>small{position:absolute;bottom:12px;right:16px;font:11px Consolas,monospace;color:#a0a399}.mechanical-part{position:absolute;width:94px;height:94px;left:50%;top:51%;transform:translate(-50%,-50%) rotate(-25deg);border:17px solid #8d9286;border-radius:50%;box-shadow:3px 6px 0 #5e6554,8px 13px 20px #323a2820,inset 0 0 0 3px #e1e2dd}.mechanical-part i{position:absolute;inset:-11px;border:1px dashed #cdd0c8;border-radius:50%}.part-1{border-radius:12px;width:103px;height:66px;border-width:15px;background:#5f6456}.part-2{border-radius:8px;height:90px;width:72px;border-width:10px;background:repeating-linear-gradient(90deg,#b4b9ab 0px,#b4b9ab 3px,#e8eae5 3px,#e8eae5 7px)}
/* 商品卡片下半部分：名称、规格信息、库存数（库存少时 warning 显示为橙色） */
.product-body{padding:22px}.product-body h2{margin:7px 0 20px;font-size:17px}.product-meta{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#9da097;margin-bottom:20px}.product-meta b{display:block;color:#63675a;font-size:12px}.count-label{font-size:12px;color:#8a8f81}.stock-number{font-weight:700;color:var(--green)}.stock-number.warning{color:#b88034}

/* ==== 表单 ==== */
/* 表单面板与两列网格布局 */
.form-panel{padding:26px}.form-panel h2{margin:0 0 22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 21px}

/* ==== 新建订单页（下单页）==== */
/* 左侧填写区与右侧固定的订单摘要（order-summary，随页面滚动保持可见）；step 为步骤编号 01/02/03；item-row 为商品明细行 */
.order-form-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(250px,1fr);gap:24px}.order-summary{align-self:start;position:sticky;top:24px;padding:26px}.order-summary p{font-size:13px;color:#878b7f}.summary-country{padding:15px 0;margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:22px;font-weight:700;color:var(--green)}.summary-country span{font-size:12px;color:#7c8173;margin-left:15px}.step{font:12px Consolas,monospace;color:var(--green);background:#f2f3ee;display:inline-block;padding:5px 8px;margin-right:12px;border-radius:4px}.item-row{display:flex;gap:13px;align-items:center}.item-row label:first-child{flex:1;min-width:0}.qty{width:75px}.remove-item{font-size:22px;margin-top:15px}

/* ==== 订单详情页 ==== */
/* 左右两栏布局、状态徽章行、订单号标题、dl 字段列表、处理时间线（timeline） */
.detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}.detail-badges{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--muted);margin-bottom:25px}.order-title{font-size:26px}.form-panel .table-wrap{margin:0 -26px 28px}dl{display:grid;grid-template-columns:100px 1fr;font-size:13px;gap:16px 12px;margin-bottom:30px}dt{color:#93968c}dd{margin:0;overflow-wrap:anywhere}.timeline{list-style:none;border-left:1px solid #e3e6dc;margin:20px 0 0 6px;padding-left:25px}.timeline li{position:relative;margin-bottom:25px}.timeline li:before{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:var(--green);left:-30px;top:8px}.timeline p{margin:3px 0;color:var(--muted);font-size:12px}

/* ==== 商品发布表单（管理员把商品发布到客户）==== */
.publish-form{display:flex;align-items:center;gap:10px}.publish-form select{font-size:12px;margin:0;min-width:110px}.publish-form select[multiple]{max-width:190px}

/* ==== 接口列表与操作记录（审计日志）==== */
.endpoint-list>div{display:flex;gap:15px;border-top:1px solid #f1f2ee;padding:9px 0;font-size:11px}.endpoint-list code{font-size:11px;overflow-wrap:anywhere;min-width:0}.endpoint-list .muted{margin-left:auto;white-space:nowrap}.audit-row{padding:12px 0;border-top:1px solid #f1f2ee;font-size:12px}.audit-row small{font-size:10px;overflow-wrap:anywhere}

/* ==== 分页 ==== */
.pagination{display:flex;justify-content:center;gap:20px;margin:20px 0;font-size:13px}.pagination a{background:#fff;border:1px solid var(--line);padding:4px 12px;border-radius:5px}.pagination span{padding:4px}

/* ==== 提示消息 ==== */
/* alert 提示框；success 成功（绿色）、error 错误（红色） */
.alert{padding:15px 20px;border-radius:7px;margin-bottom:20px;font-size:13px}.success{background:#f0f3e8;color:#5c6e3a;border:1px solid #d8dfca}.error{background:#fff0ed;color:#9e463c;border:1px solid #edd0c9}.alert ul{margin:0;padding-left:18px}

/* 无数据时的空状态提示；sr-only 为只给屏幕阅读器读的隐藏文字 */
.empty{text-align:center;padding:45px 25px;color:#9b9f93}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==== 登录页（以及注册等未登录画面）==== */
/* 左侧品牌介绍区（auth-story）与右侧登录表单卡片（auth-card） */
.auth .content{max-width:1200px;padding-top:24px}.auth .topbar{height:82px}.brand.dark{color:var(--nav);font-size:29px}.brand.dark span{color:var(--green)}.auth-grid{display:grid;grid-template-columns:1.05fr 1fr;min-height:560px;border-radius:15px;overflow:hidden;border:1px solid var(--line);background:white}.auth-story{background:var(--nav);padding:58px 47px;color:white;display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-story:after{content:'';position:absolute;width:330px;height:330px;border:1px solid #ffffff0e;border-radius:50%;right:-220px;bottom:-100px;box-shadow:0 0 0 50px #ffffff04,0 0 0 100px #ffffff03}.auth-story .eyebrow{color:#a6b194;margin-bottom:35px}.auth-story h1{font-size:46px;line-height:1.2;letter-spacing:-2px;margin-bottom:27px}.auth-story em{font-style:normal;color:var(--lime)}.auth-story p{font-size:13px;max-width:320px;color:#b6bda9}.story-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:50px;font-size:9px;color:#899576;letter-spacing:1px}.story-bottom span{font-size:23px;color:var(--lime)}.auth-card{padding:61px 56px}.auth-card h2{font-size:27px;margin:0 0 12px}.auth-card>p{font-size:12px;margin-bottom:25px}.auth-card label{font-size:12px}.auth-card .full{margin-top:22px;justify-content:space-between}.small-link{font-size:11px;color:var(--green);display:block;text-align:right}.auth-register{text-align:center;font-size:12px;margin:25px 0 0;color:var(--green)}

/* 窄版页面（注册申请、条款确认等）：居中、最大宽度 700px；check 为复选框行，terms 为条款文字框 */
.narrow{max-width:700px;margin:25px auto;padding:38px}.narrow h1{margin-bottom:15px}.check{display:flex;gap:10px;align-items:center;margin:20px 0}.terms{background:#f7f8f5;padding:12px;font-size:12px;color:#797e6e}.terms p{margin:12px 0 0}
/* ==== 大屏幕（宽度 1500px 以上）：加大内边距与字号 ==== */
@media(min-width:1500px){.content{padding-top:35px}body{font-size:15px}td{font-size:13px}.stat strong{font-size:43px}}

/* ==== 平板与窄屏（宽度 1150px 以下）：侧边栏变窄，多栏布局改为单栏，隐藏部分次要信息 ==== */
@media(max-width:1150px){.sidebar{width:190px;padding:30px 14px}.portal .main{margin-left:190px}.content{padding:24px}.topbar{padding:0 24px}.dashboard-grid{grid-template-columns:1fr}.low-stock{display:none}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:17px}.order-form-grid{grid-template-columns:1fr}.order-summary{position:static}.detail-grid{grid-template-columns:1fr}.user-name{display:none}.auth-story h1{font-size:37px}.auth-card{padding:45px 35px}}

/* ==== 手机端（宽度 760px 以下）：侧边栏变为顶部横向滚动导航，网格改为 1 到 2 列，缩小字号与内边距 ==== */
@media(max-width:760px){.sidebar{position:static;width:100%;padding:18px;display:block}.sidebar-hero{display:none}.brand-caption,.sidebar-bottom,.nav-label{display:none}.sidebar nav{display:flex;overflow-x:auto;gap:5px;margin-top:16px}.nav-link{white-space:nowrap;padding:8px 11px;font-size:12px;gap:6px}.nav-icon{font-size:16px;width:16px}.portal .main{margin:0}.topbar{height:65px;padding:0 18px}.breadcrumb{display:none}.top-actions{margin-left:auto}.content{padding:20px 16px}.environment{align-items:flex-start;font-size:10px;gap:7px}.page-heading{align-items:flex-start;gap:12px;margin-bottom:20px}.heading-main{gap:12px}.heading-cta{min-height:38px;padding:9px 14px;font-size:12px}.page-heading .button{font-size:11px;padding:8px 10px}.page-heading .button-row{justify-content:flex-end}h1{font-size:25px}.eyebrow{font-size:8px;letter-spacing:1px}.stat-grid{grid-template-columns:1fr 1fr;gap:12px}.stat{padding:15px}.stat strong{font-size:30px}.product-grid{grid-template-columns:1fr 1fr;gap:12px}.product-body{padding:14px}.product-body h2{font-size:14px}.product-meta{flex-direction:column}.product-art{height:130px}.product-body .button{font-size:11px;padding:9px}.mechanical-part{transform:translate(-50%,-50%) rotate(-25deg) scale(.75)}.connection-card{padding:18px;align-items:flex-start;flex-wrap:wrap}.connection-card .button{margin-left:60px}.connection-card>div:nth-child(2){flex:1}.toolbar{flex-wrap:wrap}.toolbar input{flex:1;min-width:160px}.form-panel{padding:20px}.form-grid{grid-template-columns:1fr}.item-row{gap:8px}.qty{width:65px}.form-panel .table-wrap{margin-left:-20px;margin-right:-20px}.detail-badges{font-size:11px;gap:12px}.order-title{font-size:18px;overflow-wrap:anywhere}.publish-form{flex-wrap:wrap}.auth-grid{grid-template-columns:1fr}.auth-story{padding:30px}.auth-story h1{font-size:33px}.auth-story .eyebrow{margin-bottom:18px}.story-bottom{padding-top:15px}.auth-card{padding:30px}.narrow{padding:25px}.endpoint-list>div{gap:8px}.endpoint-list code{font-size:10px}}

/* ==== 追加样式：通知中心、头程入库、物流追踪、换标画面 ==== */
/* 侧边栏导航链接右侧的未读数量角标；未读的操作记录行左侧加红线 */
.nav-link .counter{margin-left:auto;background:#d94f2b;color:#fff;border-radius:9px;padding:0 6px;font-size:11px;line-height:18px}
.audit-row.unread{border-left:3px solid #d94f2b;padding-left:9px}
.audit-row form{display:inline}
.detail-badges span a{color:inherit}
.item-row label.qty{max-width:120px}
/* 接口列表改为 3 列网格；表格单元格中的小字说明；面板标题中的表单 */
.endpoint-list>div{display:grid;grid-template-columns:80px 1fr auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line,#e6e3dd)}
table td small{display:block;color:#6d6a64;font-size:11px}
.panel-heading form{margin:0}
/* 表单内跟在输入控件后面的小标题，上方需要留出空间。 */
.form-panel h3{margin:26px 0 10px;font-size:15px}
.form-panel h3:first-child{margin-top:0}
.form-panel form+h3,.form-panel .button-row+h3{margin-top:30px}
/* ==== 统计卡片等高、接口凭据状态、联调台（probe）的请求轮次与判定结果、字段调查表（survey）==== */
.stat-grid{grid-auto-rows:1fr}.credential-status{border-top:1px solid var(--line);padding-top:20px;margin-bottom:26px}.probe-panel .check{margin:14px 0}.probe-url{color:var(--muted);overflow-wrap:anywhere;margin:18px 0 6px}.probe-round{border-top:1px solid #f1f2ee;padding:14px 0}.probe-round>strong{font-size:12px}.probe-io{margin-top:8px}.probe-io>span{font-size:11px}.probe-panel pre{font:12px/1.55 Consolas,monospace;background:#f9faf7;border:1px solid var(--line);border-radius:6px;padding:11px 13px;margin:4px 0 0;max-height:320px;overflow:auto;white-space:pre;color:#3d4334}.probe-verdict{border-top:1px solid #f1f2ee;margin-top:14px;padding-top:14px}.probe-verdict p{font-size:12px;margin:0 0 7px}.probe-verdict p:last-child{margin-bottom:0}.survey-panel .table-wrap{margin-top:16px;border:1px solid var(--line);border-radius:7px}.survey-table td{padding:11px 14px}.survey-table th{padding:10px 14px}.survey-fields{margin:8px 0 0}

/* ==== 邮编自动填地址（portal.js 第 7 模块）：状态提示 ok 绿色、warn 橙色；多候选时的选择框 ==== */
.postal-status{display:block;margin-top:.35rem;font-size:.8rem;color:var(--muted,#6b7280);min-height:1.1em}
.postal-status.ok{color:#456e17}
.postal-status.warn{color:#b45309}
.postal-picker{margin-top:.4rem}
.postal-picker[hidden],.postal-status:empty{display:none}
/* 订单取消表单：取消按钮与确认复选框并排 */
.cancel-form{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.cancel-form .check{margin:0;font-size:12px;color:#797e6e}

/* ==== 商品照片：目录卡片、商品详情大图、列表缩略图、编辑页照片上传区 ==== */
.product-art.has-photo{padding:0;background:#fff}.product-art.has-photo>span,.product-art.has-photo>small{position:absolute;z-index:1;background:#ffffffcc;padding:2px 6px;border-radius:4px}.product-art.has-photo>span{top:12px;left:14px}.product-art.has-photo>small{bottom:10px;right:12px}.product-art.has-photo a{display:block;height:100%}.product-photo{width:100%;height:100%;object-fit:contain;display:block;background:#f7f8f6}
/* 商品详情页大图 */
.product-figure{margin:0 0 22px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f7f8f6}.product-figure img{display:block;width:100%;max-height:420px;object-fit:contain}
/* 商品列表中带缩略图的单元格 */
td.with-thumb{display:flex;align-items:center;gap:10px}.product-list-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex-shrink:0}
/* 商品编辑页的照片上传字段（占满整行）与当前照片预览 */
.product-photo-field{grid-column:1/-1}.product-photo-thumb{display:block;max-width:220px;max-height:160px;object-fit:contain;border:1px solid var(--line);border-radius:6px;margin-bottom:10px;background:#f7f8f6}.product-photo-field .check{margin:0 0 17px}

/* ==== JROAD 浅色配色层：白色底面、炭灰色文字、柔和的品牌绿强调色 ==== */
/* 这一层只改变外观（颜色、阴影），上面已有的尺寸、布局和响应式断点保持不变。 */
/* 浅色配色层重新定义颜色变量： */
:root {
/* --ink：主文字颜色（炭灰） */
    --ink: #23251d;
/* --muted：次要文字颜色（灰） */
    --muted: #6b6d62;
/* --brand：品牌主色（橄榄绿） */
    --brand: #5a6b2d;
/* --brand-hover：品牌色的鼠标悬停色（更深） */
    --brand-hover: #44521f;
/* --brand-soft：品牌色的浅底色（徽章、头像、步骤编号的背景） */
    --brand-soft: #eef2e2;
/* --green：沿用旧变量名，指向 --brand，使前面引用 --green 的规则也换成新品牌色 */
    --green: var(--brand);
/* --lime：强调色（黄绿色） */
    --lime: #c4d47c;
/* --line：边框与分隔线颜色 */
    --line: #e5e6df;
/* --bg：页面背景色 */
    --bg: #f7f8f3;
/* --nav：侧边栏背景色 */
    --nav: #323a25;
}
/* 以下按区域重新设定颜色：正文字体、侧边栏、顶部栏、表单控件、按钮、统计卡片、表格、徽章、商品卡片、登录页等 */
body { font-family: Inter, Arial, 'Yu Gothic UI', 'Microsoft YaHei', sans-serif; }
.sidebar { color: #c6cdb6; box-shadow: none; }
.brand { color: #ffffff; }
.brand.dark { color: var(--ink); }
.brand span { color: var(--lime); }
.brand.dark span { color: var(--brand); }
.brand-caption, .nav-label, .sidebar-bottom small { color: #9ba58a; }
.nav-link:hover { background: #3f4832; color: #ffffff; }
.nav-link.active { background: var(--lime); color: #2a321a; box-shadow: none; }
.sidebar-bottom { border-top-color: #ffffff24; }
.green-dot { background: var(--lime); }
.breadcrumb, .environment, .eyebrow { color: var(--muted); }
.breadcrumb span { color: #b5b5b5; }
.top-actions select { background: #f4f4f4; }
.avatar { color: var(--brand-hover); background: var(--brand-soft); }
.environment-tag { color: #765414; background: #fff8e8; border-color: #e8d8af; }
.environment.live .environment-tag { color: #225b86; background: #edf6ff; border-color: #c4dced; }
label, .advanced>summary { color: #454545; }
input, select, textarea { border-color: #d8d8d8; background: #ffffff; }
input:disabled { background: #f2f2f2; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline-color: #5a6b2d40; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brand); }
.primary { background: var(--brand); color: #ffffff; }
.primary:hover { background: var(--brand-hover); }
.secondary, .ghost { border-color: #d8d8d8; color: #454545; }
.secondary:hover, .ghost:hover { background: #f4f4f4; border-color: #bdbdbd; }
.danger { background: #fff5f5; color: #a51e1e; border-color: #eac8c8; }
.stat, .panel, .product-card, .auth-grid { box-shadow: 0 2px 10px #22222204; }
.stat-label, .count-label { color: var(--muted); }
.stat-label span { background: #f4f4f4; color: #666666; }
.stat-line { background: var(--brand); }
.stat-line.pending { background: #d9ad4e; }
.stat-line.shipped { background: #74a6c7; }
.stat-line.delivered { background: #9eaf7d; }
th { color: #626262; background: #fafafa; }
td, .stock-row, .endpoint-list>div, .audit-row, .probe-round, .probe-verdict { border-color: #eeeeee; }
table td small { color: var(--muted); }
.badge { color: #805c12; background: #fff5dc; }
.badge.delivered, .badge.shipped { color: #4d5f2c; background: #f1f4eb; }
.badge.cancelled { color: #626262; background: #f0f0f0; }
.part-icon { color: #676767; background: #f2f2f2; }
.connection-card { background: #ffffff; border-color: var(--line); }
.connection-card p { color: var(--muted); }
.connection-icon { color: #4d5f2c; background: #f1f4eb; }
footer, .product-meta { color: #737373; }
.product-art { background: linear-gradient(135deg, #eeeeee, #fafafa); }
.product-art>span, .product-art>small { color: #737373; }
.mechanical-part { border-color: #969696; box-shadow: 3px 6px 0 #666666, 8px 13px 20px #22222220, inset 0 0 0 3px #e2e2e2; }
.mechanical-part i { border-color: #cfcfcf; }
.part-1 { background: #666666; }
.part-2 { background: repeating-linear-gradient(90deg, #b5b5b5 0px, #b5b5b5 3px, #e8e8e8 3px, #e8e8e8 7px); }
.product-meta b { color: #494949; }
.product-photo, .product-figure, .product-photo-thumb { background: #fafafa; }
.stock-number { color: #4d5f2c; }
.stock-number.warning { color: #926113; }
.order-summary p, .summary-country span, dt, .empty { color: var(--muted); }
.summary-country { color: var(--ink); }
.step { color: var(--brand-hover); background: var(--brand-soft); }
.auth-story { background: linear-gradient(135deg, #fafafa, #f2f2f2); color: var(--ink); }
.auth-story .eyebrow { color: var(--brand-hover); }
.auth-story em, .story-bottom span { color: var(--brand); }
.auth-story p, .story-bottom { color: var(--muted); }
.auth-story:after { border-color: #5a6b2d1f; box-shadow: 0 0 0 50px #5a6b2d08, 0 0 0 100px #5a6b2d06; }
.terms, .probe-io pre, .probe-panel pre { background: #fafafa; color: #555555; }
.cancel-form .check { color: #555555; }
.nav-link .counter { background: var(--lime); color: #2a321a; }
.audit-row.unread { border-left-color: var(--brand); }
/* ==== 列表排序链接（sort-link，当前排序列显示箭头）、按月筛选、用户列表 ==== */
.sort-link{display:inline-flex;align-items:center;gap:5px;color:inherit}.sort-link:hover,.sort-link.active{color:var(--green)}.sort-mark{font-size:9px;opacity:.6}.sort-link.active .sort-mark{opacity:1}.month-filter{display:flex;gap:8px;align-items:center}.month-filter input{width:auto;margin:0}.user-table td small{font-size:11px}.filter-note{font-size:12px;color:var(--muted);margin:-12px 0 18px}
/* 初始密码显示框；数据库查看画面（db-tables 表名列表、db-cell 单元格省略显示） */
.initial-password{border-color:#d8dfca;background:#f9faf5}.password-value{font-size:20px;letter-spacing:1px;margin-right:12px}.db-tables{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.db-tables a{font-size:12px}.db-cell{max-width:320px;overflow:hidden;text-overflow:ellipsis}
/* 邮件通知设置：每个事件一行（复选框 + 名称 + 说明） */
.mail-event{align-items:flex-start;margin:0;padding:12px 0;border-top:1px solid #f1f2ee}.mail-event input{margin-top:4px}.mail-event strong{margin-right:8px}.mail-event small{margin-top:2px}
/* 侧边栏内容超出屏幕高度时可纵向滚动 */
.sidebar{overflow-y:auto;overscroll-behavior:contain}
/* 危险操作区（删除账户等）：红色边框与风险说明列表 */
.danger-zone{border-color:#edd0c9;background:#fff8f6}.danger-zone h2{color:#a44134}.delete-risks{margin:0;padding-left:20px;font-size:13px;line-height:1.9;color:#5b3a33}
/* ==== 必填检查（portal.js 第 9 模块）：红色 *（req）、输入框下方的错误提示（field-error）、出错控件红框（invalid）；顶部栏用户名与角色 ==== */
.req{color:#c0392b;margin-left:3px;font-weight:700}.field-error{color:#b03a2e;font-size:12px;margin-top:5px}input.invalid,select.invalid,textarea.invalid{border-color:#d9776b;background:#fff8f6}.check .field-error{flex-basis:100%;margin:0}.check{flex-wrap:wrap}.user-name{display:flex;flex-direction:column;line-height:1.3}.user-role{font-size:10px;color:var(--muted)}

/* ==== 统计模块（統計モジュール設計書 第 6 节）==== */
/* 筛选工具栏、环比增减（delta：up 上升绿色、down 下降红色）、SVG 图表（柱状 chart-bar、折线 chart-line、坐标轴、图例）、可滚动表格 */
.stats-intro{font-size:13px;max-width:900px;margin:-14px 0 22px}.stats-note{font-size:12px;margin:-12px 0 22px}
.stats-toolbar{flex-wrap:wrap;gap:12px}.stats-toolbar .range-buttons{display:flex;gap:6px;flex-wrap:wrap}.stats-toolbar .range-buttons .button{min-height:34px;padding:6px 12px;font-size:12px}
.stats-toolbar .inline-label{display:flex;align-items:center;gap:8px;margin:0;min-width:0;font-size:12px;white-space:nowrap}.stats-toolbar .inline-label input,.stats-toolbar .inline-label select{margin:0;min-height:36px;padding:6px 10px;width:auto}
.delta{font-size:12px;margin-top:2px}.delta.up{color:#5e7435}.delta.down{color:#a44134}.delta .muted{font-size:11px}
.stats-secondary .stat strong.stat-small,.lead-grid .stat strong.stat-small{font-size:26px;line-height:1.4}.stat-small small{display:inline;font-size:12px;color:var(--muted)}.stat-small.warning{color:#b88034}
.status-split{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:6px}.status-split b{font-size:20px;font-weight:600;display:block;line-height:1.3}.status-split small{font-size:11px}
.chart-body{padding:4px 23px 14px}.chart-scroll{overflow-x:auto}.chart{width:100%;height:auto;display:block;font:12px 'Segoe UI','Yu Gothic UI',sans-serif}
.chart-grid{stroke:#eaece6;stroke-width:1}.chart-axis{fill:#92968b;font-size:11px}.chart-axis-right{fill:#b17b39}.chart-label{fill:#4c5243;font-size:12px}.chart-value{fill:#34392c;font-size:11px;font-weight:600}
.chart-bar{fill:var(--chart-bar,#799453)}.chart-line{fill:none;stroke:var(--chart-line,#d59a3f);stroke-width:2.2;stroke-linejoin:round}.chart-dot{fill:var(--chart-line,#d59a3f);stroke:#fff;stroke-width:1.5}.chart-line.secondary{stroke:var(--chart-bar,#799453)}.chart-dot.secondary{fill:var(--chart-bar,#799453)}.chart-empty{padding:14px 0 6px;font-size:12px}
.chart-legend{display:flex;gap:18px;font-size:11px;color:var(--muted);margin:6px 0 4px}.chart-legend i{display:inline-block;width:14px;height:8px;margin-right:6px;border-radius:2px;vertical-align:middle}.legend-bar{background:var(--chart-bar,#799453)}.legend-line{background:var(--chart-line,#d59a3f);height:3px!important}
.scroll-table{max-height:520px;overflow-y:auto}.scroll-table thead th{position:sticky;top:0;z-index:1}.stats-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.stats-columns .panel{margin-bottom:24px}
.lead-grid{grid-template-columns:repeat(4,1fr);padding:0 23px 20px;margin:0}.lead-grid .stat{border:0;background:#f9faf8;padding:16px 18px 18px}.first-leg-grid{padding:0 23px 20px}
.panel-note{font-size:12px;padding:0 23px 12px;margin:-8px 0 0}.panel-heading .counter{margin-left:8px;vertical-align:middle}
.product-flow{font-size:11px;color:var(--muted);margin:-12px 0 16px}.product-flow b{color:#4c5243;font-weight:600}
@media(max-width:1150px){.stats-columns{grid-template-columns:1fr}.lead-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.stats-secondary{grid-template-columns:1fr}.lead-grid{grid-template-columns:1fr 1fr;padding:0 16px 16px}.chart-body{padding:4px 16px 12px}.stats-toolbar .inline-label{width:100%}.stats-toolbar .inline-label input,.stats-toolbar .inline-label select{flex:1}}
.chart-body .chart{min-width:520px}.chart-compact{min-width:0}.section-title{margin-top:26px}.product-flow-grid{grid-template-columns:1fr 1fr;padding:0;margin-bottom:18px;gap:10px}.product-flow-grid .stat strong.stat-small{font-size:20px}.form-panel h3{margin:22px 0 8px;font-size:14px}
.dashboard-range{margin:-8px 0 18px;gap:14px;flex-wrap:wrap}.dashboard-range .range-buttons{display:flex;gap:6px;flex-wrap:wrap}.dashboard-range .button{min-height:34px;padding:6px 12px;font-size:12px}.dashboard-range .muted{font-size:12px}
/* ==== 商品发布状态卡片（左侧色条按状态区分：已发布、暂停、归档、待审核、可发布）==== */
.state-card{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid #cbd4ba;border-radius:9px;padding:16px 20px;margin-bottom:22px}.state-card.published{border-left-color:#9eaf7d}.state-card.suspended,.state-card.archived{border-left-color:#c9c9c9}.state-card.remote_review,.state-card.sync_pending{border-left-color:#d9ad4e}.state-card.ready_to_publish{border-left-color:#74a6c7}.state-card p{margin:8px 0 0;font-size:13px}.state-meta{font-size:12px;color:var(--muted);text-align:right;display:flex;flex-direction:column;gap:4px}
/* ==== 发布流程步骤列表（flow-steps：done 已完成、current 当前步骤、off 不可用、warn 警告）==== */
.flow-steps{list-style:none;margin:0 0 26px;padding:0}.flow-steps li{display:flex;gap:14px;padding:16px 0;border-top:1px solid #f1f2ee}.flow-steps li:first-child{border-top:0;padding-top:4px}.flow-steps li>div{flex:1;min-width:0}.flow-steps strong{display:block;font-size:14px}.flow-steps p{font-size:12px;color:var(--muted);margin:4px 0 8px}.flow-no{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#f1f2ee;color:#8a8f81;text-align:center;line-height:28px;font-size:13px;font-weight:700}.flow-steps li.done .flow-no{background:#eff2e8;color:#6f814b}.flow-steps li.current .flow-no{background:var(--green);color:#fff}.flow-steps li.off{opacity:.55}.flow-done{color:#6f814b!important;font-weight:600}.flow-steps form{margin:6px 0}.flow-manual{margin-top:10px}.flow-manual summary{font-size:12px}
/* 操作说明列表与表单帮助文字 */
.action-help{margin:6px 0 12px;padding-left:18px;font-size:12px;color:#64695c}.action-help li{margin:3px 0}.form-help{font-size:12px;margin:-4px 0 14px}
@media(max-width:760px){.state-card{flex-direction:column}.state-meta{text-align:left}}
/* 当前状态提示行（now-line：on 绿色、warn 红色） */
.now-line{font-size:13px;font-weight:600;color:#64695c!important;background:#f5f6f0;border-radius:6px;padding:9px 12px;margin:6px 0 12px!important}.now-line.on{color:#5e7435!important;background:#eff2e8}
/* 公开范围单选组（scope-choice） */
.scope-choice{border:0;padding:0;margin:0 0 6px}.scope-choice legend{font-size:14px;color:#485960;margin-bottom:6px}.scope-choice .check{align-items:flex-start;margin:8px 0}.scope-choice .check input{margin-top:3px}.scope-choice .check small{display:block;font-size:11px;margin-top:2px}
/* 操作列表（按钮 + 说明） */
.action-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}.action-item{display:flex;align-items:center;gap:14px}.action-item small{font-size:12px;color:var(--muted)}
/* 归档区（红色边框的折叠区块） */
.archive-zone{margin-top:18px;border:1px solid #ecd3ce;background:#fff8f6}.archive-zone summary{color:#a44134;font-size:13px}.archive-zone form{margin-top:10px}
@media(max-width:760px){.action-item{flex-direction:column;align-items:flex-start;gap:4px}}
/* 带 hidden 属性的元素一律隐藏（portal.js 的条件显示和多候选选择框依赖此规则）；单选框尺寸 */
[hidden]{display:none!important}input[type=radio]{width:18px;min-height:18px;margin:0;accent-color:var(--green);flex-shrink:0}
/* 流程步骤的警告状态 */
.flow-steps li.warn .flow-no{background:#fff0ed;color:#a44134}.flow-warn{color:#a44134!important;font-weight:600}.now-line.warn{color:#a44134!important;background:#fff0ed}
/* ==== 统计图表：环形图（donut）各扇区按序号逐级变淡，第 9 项起（shade-8）用灰色 ==== */
.donut-slice{fill:var(--chart-bar,#799453);stroke:#fff;stroke-width:1.5}.donut-slice.shade-1{opacity:.85}.donut-slice.shade-2{opacity:.7}.donut-slice.shade-3{opacity:.55}.donut-slice.shade-4{opacity:.42}.donut-slice.shade-5{opacity:.32}.donut-slice.shade-6{opacity:.24}.donut-slice.shade-7{opacity:.17}.donut-slice.shade-8{fill:#ced0ca;opacity:1}.donut-total{font-size:22px}
/* ==== 图表设置折叠面板：配色方案选择（swatches 色块）、自定义颜色输入 ==== */
.chart-settings{margin:-8px 0 22px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 18px}.chart-settings summary{padding:12px 0;font-size:13px;color:#4c5243;cursor:pointer;list-style:none}.chart-settings summary:before{content:'▸ ';color:var(--green)}.chart-settings[open] summary:before{content:'▾ '}.chart-settings form{padding:4px 0 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 22px;align-items:end}.chart-settings label{margin:0;font-size:12px}.chart-settings select{margin-top:5px;min-height:38px;padding:7px 10px}.chart-settings .swatches{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.swatch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-size:12px;cursor:pointer}.swatch input{width:16px;min-height:16px;margin:0}.swatch i{width:14px;height:14px;border-radius:3px;display:inline-block}.swatch b{width:14px;height:4px;border-radius:2px;display:inline-block}.chart-settings input[type=color]{width:46px;min-height:34px;padding:2px;margin-top:5px}.chart-settings .custom-colors{display:flex;gap:14px}.chart-settings .button-row{grid-column:1/-1}.chart-settings form>div:first-of-type{grid-column:1/-1}.chart-settings .custom-colors{margin-top:10px}
@media(max-width:760px){.chart-settings form{grid-template-columns:1fr}}
/* 饼图网格（每行 2 个）与纵向排列的复选框组 */
.pie-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;padding:0 23px 18px}.pie-grid h3{font-size:13px;margin:6px 0 0}.pie-grid .chart-scroll{overflow:visible}.donut-total.small{font-size:16px}.check-stack{display:flex;flex-direction:column;gap:6px}.check-stack .check{margin:0}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr}}
/* 写接口状态提示行 */
.write-state{font-size:13px;font-weight:600;background:#f5f6f0;border-radius:6px;padding:9px 12px;margin:0 0 10px}
/* 统计数据注意事项（橙色文字） */
.stats-caveat{color:#9b6a1c!important;padding-top:10px}
/* ==== 商品选择器（portal.js 第 5 模块 productPicker）==== */
/* picker-native 把原生 select 隐藏但保留在表单中；picker-toggle 显示当前选择的按钮；picker-panel 弹出面板（fixed 定位）； */
/* picker-item 商品选项（selected 已选、disabled 无货）；picker-thumb 缩略图；picker-stock 库存数（out 无货为红色） */
.picker-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;opacity:0;pointer-events:none}.item-row label:first-child{position:relative}.picker{position:relative;margin-top:7px}.picker-toggle{display:flex;align-items:center;width:100%;min-height:56px;text-align:left;border:1px solid #dbded7;border-radius:7px;background:#fff;padding:6px 36px 6px 8px;color:var(--ink);position:relative}.picker-toggle:after{content:'▾';position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted)}.picker-toggle.invalid{border-color:#c9574a}.picker.open .picker-toggle{border-color:var(--green)}.picker-placeholder{color:var(--muted);padding-left:6px}.picker-panel{position:fixed;z-index:60;background:#fff;border:1px solid #d6d9d0;border-radius:8px;box-shadow:0 12px 30px #20241a22;padding:8px}.picker-search{margin:0 0 8px;min-height:38px}.picker-list{max-height:360px;overflow-y:auto}.picker-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:6px;color:var(--ink)}.picker-item:hover:not(:disabled),.picker-item.selected{background:#f2f3ee}.picker-item.disabled{opacity:.45}.picker-line{display:flex;align-items:center;gap:12px;width:100%;min-width:0}.picker-thumb{flex:0 0 48px;width:48px;height:48px;border-radius:6px;background:linear-gradient(135deg,#eceee9,#f5f7f4);overflow:hidden;display:flex;align-items:center;justify-content:center}.picker-thumb img{width:100%;height:100%;object-fit:cover}.picker-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}.picker-text b{font-family:Consolas,monospace;font-size:12px}.picker-text span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-stock{margin-left:auto;white-space:nowrap;color:var(--green);font-size:12px}.picker-stock.out{color:#a44134}
/* ==== 只读字段：灰底，表单面板内的只读输入框左侧显示锁形图标（内嵌 SVG）==== */
input[readonly],textarea[readonly],select[disabled]{background:#f0f1f2;border-color:#e2e4e6;color:#6b7278;cursor:default;box-shadow:none}input[readonly]:focus,textarea[readonly]:focus{border-color:#e2e4e6;outline:none}.form-panel input[readonly]{padding-left:36px;background:#f0f1f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23979ea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat 13px center}
/* 仪表盘统计卡片底线的新状态颜色：待发货、已完成、已取消、合计 */
.stat-line.awaiting_shipment{background:#ebcd85}.stat-line.completed{background:#add389}.stat-line.cancelled{background:#d3d5d0}.stat-line.total{background:#cbd4ba}
/* 公告正文（保留换行） */
.announcement-body{white-space:pre-wrap;margin:0;overflow-wrap:anywhere}.announcement .panel-heading{align-items:flex-start}
/* ==== 库存表格（带商品缩略图，库存数右对齐）==== */
.stock-table td{padding:9px 19px}.stock-table .stock-cell{text-align:right;width:120px;font-size:15px}.stock-table th.stock-head{text-align:right}.stock-table .picker-thumb{flex:0 0 40px;width:40px;height:40px}.stock-table .picker-line{gap:14px}.stock-table .picker-text b{font-size:11px;color:#767b6e}.stock-table .picker-text span{font-size:14px}
/* ==== 库存卡片网格（每行 3 张；low 库存少为橙色，zero 无库存为红色）==== */
.stock-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}
.stock-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stock-card .thumb{flex:0 0 52px;width:52px;height:52px;border-radius:8px;background:linear-gradient(135deg,#eceee9,#f5f7f4);overflow:hidden;display:flex;align-items:center;justify-content:center}
.stock-card .thumb img{width:100%;height:100%;object-fit:cover}
.stock-card .text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.stock-card .text b{font:11px Consolas,monospace;color:#84897c;font-weight:600}
.stock-card .text>span{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stock-card .qty{text-align:right;line-height:1.1}
.stock-card .qty b{font-size:22px;font-weight:700;color:var(--green)}
.stock-card .qty small{display:block;font-size:10px;color:#9b9f94;margin-top:2px}
.stock-card.low .qty b{color:#b88034}
.stock-card.zero{background:#fbfbfa}.stock-card.zero .qty b{color:#a44134}
@media(max-width:1150px){.stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.stock-grid{grid-template-columns:1fr}}
/* 仪表盘单栏布局 */
.dashboard-single{display:block;margin-bottom:24px}.dashboard-single .recent{margin-bottom:0}

/* 侧边栏可折叠的导航分组（details/summary，展开时箭头旋转） */
.nav-group{margin:0}.nav-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px}.nav-group>summary::-webkit-details-marker{display:none}.nav-group>summary:after{content:'\25be';font-size:9px;transform:rotate(-90deg);transition:transform .15s}.nav-group[open]>summary:after{transform:none}.nav-group>summary:hover{color:#fff}

/* ==== 商品目录：适用车型标签（product-fit）与规格列表（product-specs）==== */
.product-fit{font-size:11px;font-weight:600;color:var(--brand,#5a6b2d);background:var(--brand-soft,#eef2e2);border-radius:5px;padding:3px 9px;margin:-12px 0 14px;display:inline-block}
.product-specs{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px;margin:0 0 18px}
.product-specs dt{color:var(--muted);white-space:nowrap}
.product-specs dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}

/* 橙色警告说明框 */
.note-warn{font-size:12px;line-height:1.7;color:#8a6200;background:#fff8e8;border:1px solid #efdcb4;border-radius:7px;padding:10px 12px;margin:0 0 6px}

/* 统计页图表区的卡片网格自动换列（每张至少 235px） */
.stats-charts>.stat-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}
.stats-note a{color:var(--green,#5a6b2d);font-weight:600}

/* 自家公司（house tenant）面板与徽章 */
.house-tenant{border-color:#d9dcc9;background:#fbfcf7}
.house-tenant .panel-heading h2{color:#4f5b30}
.badge.house{background:var(--brand-soft,#eef2e2);color:var(--brand-hover,#44521f)}
.house-note{font-size:12px;margin:-10px 0 12px}

/* 商品发布表单中的行内复选框 */
.publish-form .inline-check{margin:0;font-size:12px;white-space:nowrap;gap:6px}

/* ==== 商品目录（改版）：卡片更紧凑，使 1 页能显示整个目录；另加列表显示模式（view-switch 切换卡片/列表）==== */
.heading-tools{display:flex;align-items:center;gap:16px}
.view-switch{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#fff}
.view-switch a{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:16px;color:var(--muted)}
.view-switch a+a{border-left:1px solid var(--line)}
.view-switch a.on{background:var(--brand-soft,#eef2e2);color:var(--brand-hover,#44521f)}
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.product-art{height:132px;padding:12px}
.product-art>small{bottom:8px;right:12px}
.product-body{padding:16px 16px 18px}
.product-body h2{margin:5px 0 12px;font-size:15px;line-height:1.45}
.product-fit{font-size:10px;padding:2px 8px;margin:-8px 0 12px}
.product-specs{gap:3px 10px;font-size:11px;margin:0 0 14px}
.product-body .button{min-height:34px;font-size:12px}
.catalog-table td{vertical-align:middle}
.catalog-table .row-action{text-align:right}
.catalog-table .row-action .button{min-height:32px;padding:6px 12px;font-size:12px}
@media(max-width:1500px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.catalog-mark{color:var(--brand,#5a6b2d);font-size:9px;margin-left:5px;vertical-align:1px}
.catalog-legend{margin:-6px 0 18px;font-size:12px}

/* ==== お知らせ（公告）：类似邮箱的公告列表、公告详情页、仪表盘顶部的公告滚动条（ticker），以及右键菜单（notice-menu）==== */
.notice-table td{vertical-align:middle}
.notice-table .notice-flag{width:34px;text-align:center}
.notice-table .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand,#5a6b2d)}
.notice-table tr.unread .notice-subject{font-weight:700}
.notice-subject{font-size:14px}
.notice-table td small{white-space:normal;color:var(--muted);margin-top:2px}
.notice-table .clip{font-size:11px;color:var(--muted);margin-left:8px}
.notice-table .badge{margin-left:8px}
.notice-table .row-action{text-align:right;white-space:nowrap}
.notice-table .row-action .button{min-height:30px;padding:5px 11px;font-size:11px}
.notice-detail .announcement-body{white-space:pre-wrap;font-size:14px;line-height:1.9}
.notice-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:22px 0}
.notice-images img{width:100%;border:1px solid var(--line);border-radius:8px;display:block}
.file-list{list-style:none;padding:0;margin:0}
.file-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #f1f2ee;font-size:13px}
.attach-list{margin:0 0 18px}
.attach-list .check{gap:8px;margin:6px 0;font-size:12px}
.notice-ticker{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;max-width:760px;margin:0 30px}
.ticker-label{flex:none;font-size:10px;letter-spacing:1.5px;font-weight:700;color:var(--brand-hover,#44521f);background:var(--brand-soft,#eef2e2);border-radius:999px;padding:5px 12px;white-space:nowrap}
.ticker-items{position:relative;flex:1;min-width:0;height:24px}
.ticker-item{position:absolute;inset:0;display:flex;align-items:center;gap:12px;min-width:0;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.ticker-item.on{opacity:1;transform:none;pointer-events:auto}
.ticker-item .when{flex:none;font:11px/1 Consolas,monospace;letter-spacing:.5px;color:#9aa08f}
.ticker-item .what{flex:1;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:.2px;color:#3f4732;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticker-item:hover .what{color:var(--brand-hover,#44521f);text-decoration:underline;text-underline-offset:3px}
.ticker-dots{flex:none;display:flex;gap:5px}
.ticker-dots i{width:5px;height:5px;border-radius:50%;background:#d3d7c9;transition:background .3s}
.ticker-dots i.on{background:var(--brand,#5a6b2d)}
.notice-menu{position:fixed;z-index:80;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #20241a22;padding:5px;display:flex;flex-direction:column}
.notice-menu button{background:none;border:0;text-align:left;padding:9px 12px;border-radius:6px;font-size:13px;color:var(--ink)}
.notice-menu button:hover{background:#f2f3ee}
.notice-menu button.danger{color:#a44134}
@media(max-width:1150px){.notice-ticker{margin:0 16px;max-width:none}.ticker-dots{display:none}}
@media(max-width:760px){.notice-ticker{display:none}}

/* 表单顶部的错误汇总（portal.js 必填检查生成）；商品选择器按钮出错时的红框 */
.form-alert{margin:0 0 18px;font-size:13px}
.picker-toggle.invalid{border-color:#c9574a;background:#fff8f6}

/* ==== 商品照片适配图框：每个图框都是白底的固定比例，照片完整显示（contain，不裁剪）； */
/* 上传的照片在服务器端（ProductImageStore）预先处理成 4:3，因此各种零件在卡片中大小均匀。==== */
.product-art{height:auto;aspect-ratio:4/3}
.product-art.has-photo,.product-photo{background:#fff}
.product-photo{padding:8px}
.product-figure{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;max-height:460px;background:#fff}
.product-figure img{width:100%;height:100%;max-height:none;object-fit:contain;padding:12px}
.picker-thumb,.stock-card .thumb{background:#fff;border:1px solid var(--line)}
.picker-thumb img,.stock-card .thumb img{object-fit:contain;padding:2px}
.product-list-thumb{object-fit:contain;background:#fff;padding:2px}
.product-photo-thumb{width:240px;height:180px;max-width:100%;max-height:none;object-fit:contain;background:#fff;padding:6px}

/* ==== 手机端与平板修正：这些规则必须放在最后，使窄屏规则能覆盖上面的宽屏默认值； */
/* 今后在这些规则之后追加的样式，若需要手机端调整，必须在这里另写对应规则。==== */
@media(max-width:1150px){
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(max-width:760px){
.product-grid{grid-template-columns:1fr;gap:12px}
.product-body{padding:14px 15px 16px}
.product-body h2{font-size:15px;margin:4px 0 10px}
.product-fit{margin:-6px 0 10px}
.product-specs{font-size:12px;gap:4px 12px;margin-bottom:14px}
.product-specs dd{overflow-wrap:normal;word-break:keep-all}
.heading-main{gap:12px}
.heading-cta{min-height:38px;padding:9px 14px;font-size:12px}
.heading-tools{gap:10px}
.catalog-table td,.catalog-table th{white-space:nowrap}
}

/* ==== 表示不可用操作的按钮（例如无库存时的下单按钮）：半透明且不可点击 ==== */
.button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* orders */
/* ==== 出荷注文（ORDERS 模块）：一览页状态计数卡片、多行搜索框、下单页出荷予定提示、在庫不明标记 ==== */
.filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.status-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:18px}
.status-card{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.status-card:hover{border-color:#b9c3a4;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.status-card.active{border-color:var(--brand,#6f814b);box-shadow:inset 0 0 0 1px var(--brand,#6f814b)}
.status-card-label{font-size:11px;color:#767b6e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status-card strong{font-size:24px;font-weight:600;letter-spacing:-.5px;line-height:1.2}
.status-card.attention.active,.status-card.attention strong{color:#b04a3a}
.status-card.rejected strong,.status-card.failed strong{color:#b04a3a}
.orders-toolbar textarea{flex:0 0 270px;width:270px;min-width:0;min-height:43px;height:43px;max-height:140px;margin-top:0;resize:none;overflow:hidden;font:inherit;font-size:14px;line-height:1.4;padding:10px 12px;border:1px solid #dbded7;border-radius:7px}.orders-toolbar select{flex:0 1 auto;min-width:110px;max-width:170px}.orders-toolbar textarea::placeholder{color:#8a8f80}.orders-toolbar{margin-bottom:6px}.orders-toolbar input[type=date]{flex:0 0 auto;width:auto;height:43px;min-height:43px;padding:8px 10px}.orders-toolbar select,.orders-toolbar .button{height:43px;min-height:43px}.orders-toolbar .button{display:inline-flex;align-items:center}.search-hint{margin:0 0 20px}
.note-ship{margin:12px 0 0;padding:10px 12px;background:#eff2e8;color:#4d5f2c;border-radius:6px;font-size:13px}
.picker-stock.unknown{color:#9a8450}
.badge.at_warehouse,.badge.accepted,.badge.review{background:#fff5d9;color:#987630}
.badge.rejected,.badge.failed{background:#fbe9e5;color:#a7412f}
.staff-memo textarea{min-height:80px}
@media(max-width:760px){.status-cards{grid-template-columns:repeat(2,1fr)}.status-card strong{font-size:20px}}

/* ===== [V2-PRODUCTS] 商品管理・SKU 取込・接続設定・在庫一覧の追加スタイル ===== */
/* 要確認の行（薄い黄色）とインライン小ボタン */
tr.row-review td{background:#fffbea}
.button.small{padding:4px 10px;font-size:11px}
small.warning,span.warning{color:#b88034}
/* 在庫一覧（表形式）：過期・アラート表示 */
.inventory-table td.alert-cell{color:#a7412f;font-weight:700}
.inventory-table .stale{color:#b88034}
/* 接続設定：打码日志の整形表示 */
.log-pre{white-space:pre-wrap;word-break:break-all;font-size:11px;background:#f6f7f3;padding:10px;border-radius:6px;max-height:320px;overflow:auto}
tr.log-detail td{padding-top:0;border-top:none}
.badge.success{background:#eaf3e2;color:#4d6b2a}.badge.error{background:#fff5d9;color:#987630}
/* 在庫推移の簡易折れ線 */
.stock-chart{width:100%;max-width:560px;height:auto}
.stock-chart .axis{stroke:#d8dfca;stroke-width:1}.stock-chart .line{fill:none;stroke:#5c6e3a;stroke-width:2}.stock-chart .dot{fill:#5c6e3a}.stock-chart text{font-size:10px;fill:#8a8f81}

/* ==== [V2-MISC] 注意提示（session warning） ==== */
.alert.warning{background:#fff7e6;color:#8a5a12;border:1px solid #f0dcb4}
/* まとめて貼り付け（新建订单页）与注文前の確認ダイアログ */
.paste-box{margin:-6px 0 18px}.paste-box textarea{min-height:90px}.paste-box .button{margin-top:8px}.paste-box [data-paste-status]{display:inline}
dialog.order-confirm{border:1px solid var(--line);border-radius:10px;padding:26px 28px;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;color:var(--ink)}
dialog.order-confirm::backdrop{background:#1f241a66}
dialog.order-confirm dl{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;margin:0 0 20px}dialog.order-confirm dt{color:var(--muted);font-size:12px;padding-top:2px}dialog.order-confirm dd{margin:0}dialog.order-confirm ul{margin:0;padding-left:18px}dialog.order-confirm .pre{white-space:pre-wrap}
dialog.order-confirm .confirm-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
@media(max-width:560px){dialog.order-confirm dl{grid-template-columns:1fr}}
@media(max-width:760px){.orders-toolbar textarea{flex:1 1 100%;width:100%}.orders-toolbar select{max-width:none}}
/* 客户看到的在庫表示（StockLevel）：在庫あり 绿 / 在庫少なめ 黄 / 残りわずか 橙 / 在庫なし 灰 / 在庫不明 */
.stock-level{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.6;white-space:nowrap}
.stock-level-plenty{background:#e3f1dc;color:#2f6b1f}.stock-level-some{background:#fbf1cf;color:#7a5a00}.stock-level-few{background:#fbe1e1;color:#b42318}.stock-level-none{background:#ececea;color:#6b6f66}.stock-level-unknown{background:#f2f3ee;color:#7d8172}
.picker-stock.level-plenty{color:#2f6b1f}.picker-stock.level-some{color:#7a5a00}.picker-stock.level-few{color:#b42318}.picker-stock.level-none{color:#6b6f66}
/* 商品详细：1 枚パネル、左 写真 / 右 商品情報（写真がなければ情報のみ、幅を抑える） */
.product-detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start}
.product-detail.no-photo{grid-template-columns:minmax(0,1fr);max-width:720px}
.product-detail .product-figure{margin:0}
.product-detail .product-info h2{margin-top:4px}
.product-detail dd small{display:block;margin-top:6px}
@media(max-width:900px){.product-detail{grid-template-columns:minmax(0,1fr);gap:22px}}
/* 登录・注册画面的 B2B 案内 */
.b2b-tagline{display:inline-block;margin:6px 0 14px;padding:4px 12px;border-radius:999px;background:#eef1e3;color:#4b5a22;font-size:13px;font-weight:600}
.b2b-notice{margin:0 0 18px;padding:10px 14px;border-left:3px solid var(--green);background:#f6f7f1;border-radius:4px;font-size:13px;line-height:1.7;color:#3f4a2c}
.auth-register small{display:block;margin-top:6px}
/* 利用者の編集：所属の切り替え（選んだ項目の入力欄だけ表示） */
.affiliation-choices{display:grid;gap:4px}.affiliation-choices>.check{margin:0;min-height:40px}.affiliation-detail{display:none;margin:0 0 4px 28px;max-width:460px}.affiliation-detail small{display:block;margin-top:6px}
.affiliation-choices:has(input[value=company]:checked) .affiliation-detail[data-for=company],.affiliation-choices:has(input[value=new]:checked) .affiliation-detail[data-for=new],.affiliation-choices:has(input[value=individual]:checked) .affiliation-detail[data-for=individual]{display:block}
.affiliation-detail .ref-field{margin:0;max-width:260px}
/* 注文履歴：注文商品を 1 行ずつ表示 */
.order-items-cell .order-item-line{display:block;line-height:1.5}.order-items-cell .order-item-line+.order-item-line{margin-top:2px}.order-items-cell small{margin-top:4px}
/* 注文内容の確認：商品写真つきの明細 */
dialog.order-confirm ul.confirm-items{list-style:none;padding:0;display:grid;gap:8px}
dialog.order-confirm ul.confirm-items li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:8px 12px 8px 8px}
dialog.order-confirm .confirm-thumb{display:block;width:64px;height:48px;flex-shrink:0;object-fit:contain;background:#fff;border:1px solid #eef0ea;border-radius:6px}
dialog.order-confirm .confirm-thumb.no-photo{background:#f3f4f0}
dialog.order-confirm .confirm-item-text{flex:1;min-width:0}dialog.order-confirm .confirm-item-name{font-weight:600;overflow-wrap:anywhere}dialog.order-confirm .confirm-item-sku{font-size:12px;color:var(--muted)}
dialog.order-confirm .confirm-item-qty{font-weight:600;white-space:nowrap}
/* 商品編集：写真の一覧（右上の × で削除、追加写真は「代表にする」） */
.photo-grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.photo-tile{position:relative;margin:0;width:180px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.photo-tile img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
.photo-tile.is-main{border-color:var(--green)}
.photo-tile figcaption{position:absolute;left:6px;top:6px;font-size:11px;font-weight:600;background:var(--green);color:#fff;padding:1px 7px;border-radius:4px}
.photo-x{position:absolute;right:6px;top:6px;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:50%;background:#1f241acc;color:#fff;font-size:18px;line-height:28px;text-align:center;cursor:pointer}
.photo-x:hover{background:#a44134}
.photo-main-btn{position:absolute;left:6px;bottom:6px;min-height:0;padding:2px 8px;font-size:11px;border:1px solid var(--line);border-radius:4px;background:#ffffffe6;color:var(--ink);cursor:pointer;opacity:0;transition:opacity .15s}
.photo-tile:hover .photo-main-btn,.photo-main-btn:focus{opacity:1}
@media(hover:none){.photo-main-btn{opacity:1}}
/* 商品詳細：写真の切り替え */
.product-gallery .product-figure{margin:0}
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gallery-thumb{width:72px;height:54px;min-height:0;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;overflow:hidden}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:3px}
.gallery-thumb.active{border:2px solid var(--green)}
/* 写真の切り替え（商品カタログのカード・商品詳細）：左右の矢印、枚数表示 */
.photo-slider{position:relative}.product-art .photo-slider{height:100%}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:32px;height:32px;min-height:0;padding:0;border:1px solid #d9dcd3;border-radius:50%;background:#ffffffeb;color:#2f3527;font-size:22px;line-height:28px;text-align:center;cursor:pointer;box-shadow:0 1px 4px #1f241a26;opacity:0;transition:opacity .15s}
.slider-arrow.prev{left:8px}.slider-arrow.next{right:8px}
.slider-arrow:hover{background:#fff;border-color:var(--green)}
.photo-slider:hover .slider-arrow,.slider-arrow:focus-visible{opacity:1}
@media(hover:none){.slider-arrow{opacity:.9}}
.slider-count{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;font-size:10px;color:#fff;background:#1f241a99;padding:1px 7px;border-radius:9px;pointer-events:none}
.product-gallery.photo-slider .slider-arrow{top:calc(50% - 32px);width:38px;height:38px;font-size:26px;line-height:34px}
.product-gallery.photo-slider .slider-arrow.prev{left:10px}.product-gallery.photo-slider .slider-arrow.next{right:10px}
/* 利用者一覧：停止中の利用者は薄く表示 */
.user-table tr.is-suspended td{background:#f6f6f3;color:#8e9284}.user-table tr.is-suspended td a{color:#8e9284}
/* 在庫一覧：合計カード（倉庫の在庫照会と同じ並び）と数値列 */
.inventory-totals{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:10px}
.inventory-totals .stat strong{font-size:28px}
.tone-amber{color:#c47f00}.tone-green{color:#2f7d4f}.tone-blue{color:#2f62b5}
.inventory-source{margin:0 0 16px;font-size:12px}
.inventory-table th.num,.inventory-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.inventory-table .with-thumb small{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.inventory-totals{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 価格プラン */
.sale-price{font-weight:600}.price-std{margin-left:4px}.price-ask{font-size:12px}
.plan-targets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:13px;color:var(--ink)}
.plan-table td small{display:block}.plan-table tr.plan-gap td{background:#fff8e6}
.yen-input{display:inline-flex;align-items:center;gap:4px}.yen-input input{width:130px;text-align:right}
.plan-table-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.affiliation-plan{display:none;margin-top:14px;max-width:460px}.affiliation-plan small{display:block;margin-top:6px}
section:has(input[name=affiliation][value=individual]:checked) .affiliation-plan{display:block}
.price-plans-actions{display:flex;gap:6px;align-items:center}
/* 価格プラン：編集画面（設定カード・価格表・下部の保存バー） */
.plan-settings .form-grid{align-items:start}
.assign-field{min-width:0}
.assign-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.plan-help{margin:14px 0 0;font-size:12px}
.multi-select{position:relative}
.multi-select summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:43px;padding:0 14px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;color:var(--muted)}
.multi-select summary::-webkit-details-marker{display:none}
.multi-select summary::after{content:'▾';color:var(--muted);flex-shrink:0}
.multi-select.has-value summary{color:var(--ink)}
.multi-select[open] summary{border-color:var(--green)}
.multi-select [data-summary]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multi-options{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);max-height:300px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 8px 24px #1f241a22;padding:4px 0}
.multi-options .check{margin:0;padding:8px 14px;gap:10px;align-items:center;flex-wrap:nowrap}
.multi-options .check:hover{background:#f6f7f3}
.multi-options .check span{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.multi-options p{margin:8px 14px}
.assign-other{color:#987630;background:#fff5d9;padding:0 6px;border-radius:4px}
/* 下拉清单不能被卡片裁掉 */
.panel:has(.multi-select[open]){overflow:visible}
.plan-prices .panel-heading{padding-bottom:12px}
.plan-price-tools{display:flex;gap:8px}
.plan-price-foot{padding:14px 26px 20px;border-top:1px solid var(--line)}.plan-price-foot .check{margin:0 0 8px}.plan-price-foot p{margin:0;font-size:12px}
.plan-save-bar{position:sticky;bottom:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 -16px;padding:12px 24px;background:#ffffffee;border-top:1px solid var(--line);backdrop-filter:blur(4px)}
.plan-save-bar .button-row{margin:0}
.plan-form{padding-bottom:12px}
@media(max-width:760px){.plan-save-bar{margin:0;padding:12px 0}}
/* 利用者の編集：権限で表示を切替 */
[data-role-form][data-role-kind=staff] .customer-only{display:none}
[data-role-form][data-role-kind=customer] .staff-only{display:none}
[data-role-form] .staff-only{margin:12px 0 0}
/* 会社一覧：1 社 1 行、行内編集、利用者プルダウン */
.company-table td{vertical-align:middle;padding:10px 12px}
.company-table input:not([type=checkbox]),.company-table select{margin:0;min-height:38px;font-size:13px;width:100%}.company-table input[type=checkbox]{width:18px;min-height:18px;margin:0}
.company-table td:nth-child(1){min-width:200px}.company-table td:nth-child(2),.company-table td:nth-child(3){min-width:130px;max-width:170px}.company-table td:nth-child(4){min-width:140px}
.company-table td small{display:block;margin-top:3px}
.company-table tr.house-row td{background:#fbfcf7}
.company-table tr.inactive-row td input,.company-table tr.inactive-row td select{color:var(--muted)}
.company-table .inline-check{margin:0;white-space:nowrap}
.company-table .row-actions{white-space:nowrap}.company-table .row-actions form{display:inline-block;margin-right:6px}
.member-list{position:relative}
.member-list summary{list-style:none;display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;white-space:nowrap}
.member-list summary::-webkit-details-marker{display:none}
.member-list[open] summary{border-color:var(--green)}
.member-count{font-weight:700}
.member-pop{position:absolute;z-index:30;right:0;top:calc(100% + 4px);min-width:320px;max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 8px 24px #1f241a22;padding:4px 0}
.member-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 14px;color:var(--ink);text-decoration:none;border-bottom:1px solid #f1f2ee}
.member-row:hover{background:#f6f7f3}.member-row:last-of-type{border-bottom:0}
.member-name{font-weight:600;white-space:nowrap}.member-login{font-size:12px;color:var(--muted);white-space:nowrap}
.member-pop p{margin:10px 14px}
.member-add{display:block;padding:8px 14px;font-size:13px;color:var(--green);border-top:1px solid var(--line)}
.panel:has(.member-list[open]),.table-wrap:has(.member-list[open]){overflow:visible}
.company-help{font-size:12px;margin:-10px 0 20px}
.suspended-users{margin-top:24px}.suspended-users .panel-heading h2{font-size:16px}.suspended-users>.muted{margin:0;padding:0 22px 14px;font-size:13px}.inactive-companies{margin-top:24px}.inactive-companies .panel-heading h2{font-size:16px}.inactive-companies>.muted{margin:0;padding:0 22px 14px;font-size:13px}
/* 新規注文：コンパクト表示（PC で下にスクロールせずに全体が見えるように） */
.order-compact .form-panel{padding:16px 20px}
.order-compact .form-panel h2{margin:0 0 12px;font-size:15px}
.order-compact .step{padding:3px 6px;margin-right:8px}
.order-compact label{margin-bottom:10px;font-size:13px}
.order-compact input,.order-compact select,.order-compact textarea{min-height:36px;padding:7px 10px;margin-top:4px;font-size:13px}
.order-compact .picker-toggle{min-height:44px}
.order-compact .addr-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.order-compact .addr-grid .span-2{grid-column:span 2}
.order-compact .compact-help{margin:-4px 0 0;font-size:12px}
.order-compact .paste-box{margin:0 0 10px;padding:8px 12px}
.order-compact .item-row{gap:10px}
.order-compact .panel{margin-bottom:14px}
.source-line .source-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.source-chip{display:inline-flex;align-items:baseline;gap:8px;font-size:13px}
.source-chip strong{font-size:14px}
.source-line .note-ship{margin:0;padding:6px 10px;font-size:12px}
.order-compact .order-summary{padding:18px 20px}.order-compact .order-summary p{font-size:13px;margin:0 0 10px}
@media(max-width:900px){.order-compact .addr-grid{grid-template-columns:1fr}.order-compact .addr-grid .span-2{grid-column:auto}}
.source-select{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;white-space:nowrap}.source-select select{margin:0;width:auto;min-width:220px}
.order-compact + footer,.order-compact .page-heading{margin-bottom:12px}
.order-compact .source-line{padding:10px 20px;background:#fbfcf7}
.order-compact .source-line .step{margin-right:4px}
.order-compact .source-line .note-ship{margin-left:auto}
.order-compact .form-panel h2{font-size:14px;margin-bottom:10px}
.order-compact label{margin-bottom:8px}
.order-compact .item-row label{margin-bottom:6px}
.order-compact #add-item{min-height:34px;padding:6px 12px;font-size:12px;margin-top:0}
.order-compact .page-heading{margin-bottom:14px}.order-compact .page-heading h1,body:has(.order-compact) .page-heading h1{font-size:24px}
body:has(.order-compact) .page-heading{margin-bottom:14px}
/* 新規注文 01：必ず 1 行に収める */
.order-compact .source-line .source-row{flex-wrap:nowrap;gap:12px}
.order-compact .source-line .source-select{flex:0 0 auto}.order-compact .source-line .source-select select{width:220px;min-width:220px}
.order-compact .source-line .source-chip{flex:0 0 auto;white-space:nowrap}
.order-compact .source-line .note-ship{flex:1 1 auto;min-width:0;white-space:nowrap;text-align:right;background:transparent;padding:0;color:#4d5f2c;font-size:12px}
@media(max-width:900px){.order-compact .source-line .source-row{flex-wrap:wrap}.order-compact .source-line .note-ship{white-space:normal;text-align:left}}
/* 利用者を追加（signup 风格：居中单列、选择卡片）2026-11-08 */
.signup{max-width:760px;margin:0 auto}.signup-step{padding:26px 28px}.signup-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}.signup-head .step{margin-top:2px}.signup-head h2{margin:0;font-size:17px}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.choice-list{display:grid;gap:10px}
.choice-card{position:relative;display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;font-weight:400}
.choice-card:hover{border-color:#9aa88a}.choice-card:has(input:checked){border-color:var(--green);background:#f5f8ef;box-shadow:0 0 0 3px rgba(75,90,34,.14)}
.choice-card input{position:absolute;opacity:0;pointer-events:none}.choice-card .choice-icon{flex:0 0 32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#eef1e6;color:var(--green);font-size:15px}
.choice-card:has(input:checked) .choice-icon{background:var(--green);color:#fff}.choice-card .choice-body{display:grid;gap:3px;padding-right:26px;min-width:0}.choice-card strong{font-size:14px}.choice-card small{color:var(--muted);font-size:12px;line-height:1.5}
.choice-card::after{content:"";position:absolute;right:14px;top:16px;width:16px;height:16px;border-radius:50%;border:1.5px solid #c7cbbd;background:#fff}.choice-card:has(input:checked)::after{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px #fff}
.signup .choice-detail{display:none;margin:-2px 0 4px 44px;max-width:520px}.signup .choice-detail input,.signup .choice-detail select{width:100%}.signup .choice-detail .field-error{display:block;margin-top:6px}
.signup .affiliation-choices:has(input[value=company]:checked) .affiliation-detail[data-for=company],.signup .affiliation-choices:has(input[value=new]:checked) .affiliation-detail[data-for=new]{display:block}
.signup-sub{font-size:14px;margin:18px 0 4px}.signup-sub+.muted{margin:0 0 12px;font-size:12px}.signup-submit{text-align:center}.signup-submit .button.large{min-width:260px;min-height:48px;font-size:15px}.signup-submit .muted{margin:14px auto 0;max-width:560px;font-size:12px}
@media (max-width:640px){.signup-step{padding:20px 18px}.signup .choice-detail{margin-left:0}}