/* 秒账复刻版样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --navy: #1b3a57;
  --navy-deep: #16324b;
  --blue: #1e7ad4;
  --blue-dark: #1668b8;
  --bg: #f2f4f7;
  --line: #e4e8ee;
  --red: #e34d4d;
  --green: #2fa84f;
  --orange: #e6892f;
  --text: #333;
  --muted: #8a94a3;
}
html, body { height: 100%; }
body { font: 13px/1.6 "Microsoft YaHei", "PingFang SC", sans-serif; color: var(--text); background: var(--bg); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #cfd6e0; border-radius: 3px; outline: none; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
a { color: var(--blue); text-decoration: none; cursor: pointer; }

/* ---------- 登录页 ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1b6fb8 0%, #124a86 55%, #0d3563 100%); position: relative; overflow: hidden;
}
.login-wrap::before, .login-wrap::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
}
.login-wrap::before { width: 640px; height: 640px; left: -160px; bottom: -260px; }
.login-wrap::after { width: 460px; height: 460px; right: -100px; top: -140px; }
.login-card {
  width: 380px; background: #fff; border-radius: 8px; padding: 28px 34px 30px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); position: relative; z-index: 2;
}
.login-card h1 { text-align: center; font-size: 17px; color: #333; margin-bottom: 22px; font-weight: 600; }
.login-card .row { margin-bottom: 16px; }
.login-card label { display: block; color: #555; margin-bottom: 6px; }
.login-card input { width: 100%; padding: 9px 10px; }
.login-btn { width: 100%; background: var(--blue); border: none; color: #fff; padding: 10px; border-radius: 4px; font-size: 14px; letter-spacing: 6px; }
.login-btn:hover { background: var(--blue-dark); }
.login-msg { color: var(--red); font-size: 12px; min-height: 18px; text-align: center; }
.login-slogan { color: rgba(255,255,255,.9); position: absolute; left: 8%; top: 34%; z-index: 2; }
.login-slogan h2 { font-size: 28px; font-weight: 400; margin-bottom: 18px; }
.login-slogan p { font-size: 14px; line-height: 2; }

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 92px; background: var(--navy); color: #cfe0f2; flex-shrink: 0; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 10; }
.logo { text-align: center; padding: 14px 0 10px; color: #fff; }
.logo .cn { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.logo .en { font-size: 9px; color: #7fa8cc; letter-spacing: 1px; }
.menu { flex: 1; }
.menu-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 0; color: #cfe0f2; cursor: pointer; font-size: 13px; border-left: 3px solid transparent; }
.menu-item .ico { font-size: 17px; }
.menu-item:hover { background: rgba(255,255,255,.06); }
.menu-item.active { background: var(--navy-deep); color: #fff; border-left-color: #3d9be9; }
.menu-item.disabled { opacity: .38; cursor: default; }
.main { flex: 1; margin-left: 92px; display: flex; flex-direction: column; min-width: 0; }

/* 顶栏 */
.topbar { height: 48px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 18px; gap: 20px; position: sticky; top: 0; z-index: 5; }
.topbar .company { flex: 1; text-align: center; color: #444; font-size: 14px; }
.topbar .top-ico { color: #666; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.topbar .top-ico:hover { color: var(--blue); }
.content { padding: 14px 18px 30px; flex: 1; }

/* 卡片容器 */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px; }
.tabs { display: flex; gap: 2px; margin-bottom: 12px; }
.tabs .tab { background: #eef1f5; border: 1px solid var(--line); border-bottom: none; padding: 7px 22px; cursor: pointer; border-radius: 4px 4px 0 0; color: #555; position: relative; top: 1px; }
.tabs .tab.active { background: #fff; color: var(--blue); font-weight: 600; }
.tabs .tab .dot { color: var(--orange); }

/* 统计卡片 */
.stat-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 150px; border-radius: 6px; color: #fff; padding: 14px 16px; }
.stat-card .val { font-size: 24px; font-weight: 700; }
.stat-card .lbl { font-size: 12px; opacity: .92; margin-top: 2px; }
.stat-card .sub { font-size: 11px; opacity: .8; }
.sc-blue { background: linear-gradient(120deg, #4a5be8, #6a7cf5); }
.sc-orange { background: linear-gradient(120deg, #f2975d, #f2ac7a); }
.sc-sky { background: linear-gradient(120deg, #2f9df0, #55b3f5); }
.sc-red { background: linear-gradient(120deg, #ee6a6a, #f28b8b); }
.sc-teal { background: linear-gradient(120deg, #1fc2a7, #3fd4ba); }
.sc-purple { background: linear-gradient(120deg, #7a5af5, #9a7bf8); }
/* 合计统计区：匹数 / 总米数 / 码单合计 */
.pb-cell { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: #fafbfd; }
.pb-cell i { font-style: normal; color: var(--muted); font-size: 12.5px; }
.pb-cell input { width: 92px; border: none; border-bottom: 1px dashed #c7d2e0; background: transparent; font-size: 15px; font-weight: 700; color: var(--navy); padding: 2px 2px 3px; outline: none; }
.pb-cell input:focus { border-bottom-color: var(--blue); }
.pb-cell-ro { cursor: pointer; user-select: none; }
.pb-cell-ro b { font-size: 15px; color: var(--navy); }
.pb-cell-ro em { font-style: normal; font-size: 12px; }
.pb-ok { color: var(--green); }
.pb-bad { color: var(--red); }

/* 工具条 */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.btn { border: none; border-radius: 3px; padding: 7px 16px; font-size: 13px; background: #eef1f5; color: #444; }
.btn:hover { filter: brightness(.97); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-green { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.btn-plain { background: #fff; border: 1px solid #cfd6e0; }
.search-input { width: 220px; }
.spacer { flex: 1; }

/* 表格 */
table.grid { width: 100%; border-collapse: collapse; background: #fff; }
.grid th, .grid td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; font-size: 13px; }
.grid th { background: #f7f9fb; color: #555; font-weight: 600; white-space: nowrap; }
.grid td.left { text-align: left; }
.grid tbody tr:hover { background: #f4f9ff; }
.grid .money { font-variant-numeric: tabular-nums; }
.pill { padding: 2px 8px; border-radius: 10px; font-size: 12px; display: inline-block; }
.pill-red { background: #fdeaea; color: var(--red); }
.pill-green { background: #e7f6ec; color: var(--green); }
.pill-orange { background: #fdf1e3; color: var(--orange); }
.pill-gray { background: #eef1f5; color: #778; }
.link-danger { color: var(--red); }

/* 图标操作列 */
.acts { display: flex; gap: 6px; justify-content: center; }
.acts span { cursor: pointer; font-size: 14px; color: var(--blue); }
.acts span.danger { color: var(--red); }
.acts span.green { color: var(--green); }
.acts span.gray { color: #a0aab8; }

/* 分页 */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 4px; color: #666; }
.pager .pg { min-width: 26px; height: 26px; border: 1px solid #cfd6e0; background: #fff; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pager .pg.cur { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 弹窗 */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 60px 16px; }
.modal { background: #fff; border-radius: 6px; width: 560px; max-width: 96vw; padding: 0 0 16px; }
.modal.wide { width: 760px; }
.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 15px; flex: 1; }
.modal-close { cursor: pointer; color: #999; font-size: 18px; line-height: 1; }
.modal-body { padding: 16px 18px; }
.modal-foot { padding: 10px 18px 0; display: flex; justify-content: flex-end; gap: 10px; }
.form-row { display: flex; align-items: center; margin-bottom: 14px; gap: 10px; }
.form-row label { width: 80px; text-align: right; color: #555; flex-shrink: 0; }
.form-row input, .form-row select, .form-row textarea { flex: 1; }
.img-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); background: #f7f9fb; }
.empty-tip { text-align: center; color: var(--muted); padding: 30px 0; }
.detail-hint { color: var(--muted); font-size: 12px; }
.tag-draft { background: #fdf1e3; color: var(--orange); padding: 1px 6px; border-radius: 3px; font-size: 11px; margin-left: 4px; }

/* ---------- 开单页 ---------- */
.editor-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.editor-head .tabs { margin-bottom: 0; }
.editor-head .ord-no { color: #666; }
.editor-head .ord-no b { color: #333; }
.ord-line { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; }
.ord-line label { color: #555; }
.ord-line input[type="text"], .ord-line input[type="date"] { min-width: 150px; }
.quick-debt { color: var(--blue); font-weight: 600; }
.sec-title { color: var(--blue); font-weight: 600; margin: 12px 0 8px; padding-left: 8px; border-left: 3px solid var(--blue); display: flex; align-items: center; gap: 10px; }
.ord-panel { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; }
.ord-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ord-top .right-amt { margin-left: auto; color: var(--red); font-weight: 700; font-size: 15px; }
.ord-top .right-amt .num { font-size: 20px; }
.grid input.cell { width: 100%; min-width: 60px; border: 1px solid transparent; background: transparent; padding: 3px 4px; border-radius: 2px; }
.grid input.cell:hover { border-color: #d8e2ee; }
.grid input.cell:focus { border-color: var(--blue); background: #fff; }
.grid td.amt-cell { font-variant-numeric: tabular-nums; font-weight: 600; }
.grid tr.sum-row td { background: #fdf9ee; font-weight: 600; }
.pay-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pay-line .debt { color: var(--blue); font-weight: 700; }
.editor-foot { position: sticky; bottom: 0; background: #eef1f5; border-top: 1px solid var(--line); padding: 9px 14px; display: flex; justify-content: flex-start; align-items: center; gap: 10px; z-index: 6; margin: 14px -18px -30px; }
.editor-foot .btn-primary { padding: 8px 26px; }
.editor-foot .spacer { margin-left: auto; }
.editor-foot .foot-sep { width: 1px; height: 20px; background: var(--line); }
.editor-foot .foot-danger { color: #d0342c; }
.editor-foot .foot-danger:hover { border-color: #d0342c; background: #fdf0ef; }
/* 快速输入匹码 */
.pima-cell { white-space: nowrap; }
.pima-cell .it-pieces { width: 64px; }
.pima-btn { color: #1a7af8; font-size: 12px; margin-left: 4px; cursor: pointer; text-decoration: underline; }
.pima-chips { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pima-chips span { background: #eef4ff; color: #1a7af8; border: 1px solid #bcd4ff; border-radius: 4px; padding: 3px 12px; cursor: pointer; font-size: 12px; }
.pima-chips span:hover { background: #1a7af8; color: #fff; }
.pima-addrow { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pima-addrow input { border: 1px solid #d9d9d9; border-radius: 4px; padding: 5px 8px; width: 200px; }
.pima-sum { color: #e34d4d; font-weight: 600; font-size: 13px; }
.pima-foot { margin-top: 8px; text-align: right; color: #888; font-size: 12px; }
/* 销售单新版 + 销售流水 */
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.st-red { color:#e34d4d; }
.st-green { color:#2fa84f; }
.st-orange { color:#f5a623; }
.btn-on { border-color:#1a7af8; color:#1a7af8; }
.batch-wrap { position:relative; }
.batch-menu { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #d9d9d9; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,.12); z-index:20; min-width:110px; }
.batch-menu span { display:block; padding:7px 14px; font-size:13px; cursor:pointer; }
.batch-menu span:hover { background:#eef4ff; color:#1a7af8; }
.batch-menu.show { display:block; }
.flow-lbl { font-size:13px; color:#555; }
.flow-title { text-align:center; margin:14px 0 4px; position:relative; }
.flow-title h2 { font-size:20px; margin:0 0 2px; }
.flow-title .sub { color:#888; font-size:12px; }
.flow-title .unit { position:absolute; right:0; bottom:0; color:#888; font-size:12px; }
.flow-user { color:#555; font-size:13px; margin:6px 0; }
.flow-table td, .flow-table th { white-space:nowrap; }
.flow-total td { background:#f5f7fa; font-weight:600; }
.flow-sum td { background:#fafbfc; font-weight:600; }
.pm-bigadd { width:100%; box-sizing:border-box; border:1px solid #1a7af8; border-radius:4px; padding:10px 12px; font-size:14px; margin-bottom:10px; }
.pm-bigadd:focus { outline:2px solid #bcd4ff; }
/* 细码标签式输入 */
.pima-tagbox { display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid #1a7af8; border-radius:4px; padding:6px 10px; margin-bottom:10px; min-height:44px; cursor:text; }
.pm-tag { background:#eef4ff; color:#1a7af8; border:1px solid #bcd4ff; border-radius:6px; padding:5px 6px 5px 12px; font-size:14px; display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.pm-tag i { cursor:pointer; font-style:normal; color:#fff; background:#e34d4d; width:27px; height:27px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; flex:none; }
.pm-tag i:active { background:#c0392b; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:60; display:flex; align-items:center; justify-content:center; cursor:zoom-out; padding:14px; }
.lightbox img { max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 4px 30px rgba(0,0,0,.5); }
.lightbox .lb-tip { position:fixed; bottom:22px; left:0; right:0; text-align:center; color:rgba(255,255,255,.75); font-size:13px; }
.lb-nav { position:fixed; top:50%; transform:translateY(-50%); width:52px; height:80px; display:flex; align-items:center; justify-content:center; font-size:44px; color:#fff; background:rgba(255,255,255,.12); border-radius:10px; cursor:pointer; user-select:none; }
.lb-nav.lb-prev { left:16px; } .lb-nav.lb-next { right:16px; }
.lb-nav:hover { background:rgba(255,255,255,.25); }
.zoomable { cursor:zoom-in; }
.pima-tagbox input { border:none; outline:none; flex:1; min-width:160px; font-size:13px; padding:4px 2px; }
.pima-stat { display:flex; justify-content:flex-end; gap:28px; color:#333; font-size:13px; margin:8px 0 2px; }

/* ---------- 胚布批次 ---------- */
.pb-card { background:#fff; border:1px solid var(--line); border-radius:10px; margin:14px 0; padding:12px 14px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.pb-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pb-head b { font-size:15px; color:#1e6fb8; }
.pb-note { color:#888; font-size:12px; }
.pb-btn { padding:4px 10px; font-size:12px; }
.pb-cols { display:grid; grid-template-columns:1fr 1fr 220px; gap:12px; }
.pb-col { background:#f8fafc; border:1px solid var(--line); border-radius:8px; padding:8px 10px; min-height:60px; }
.pb-colhead { font-size:13px; font-weight:600; padding-bottom:6px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.pb-colhead.blue { color:#1e6fb8; } .pb-colhead.teal { color:#0e9488; }
.pb-colhead.orange { color:#d97706; } .pb-colhead.red { color:#c0392b; }
.pb-line { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:3px 0; border-bottom:1px dashed #e5e9f0; }
.pb-line:last-child { border-bottom:none; }
.pb-line .pb-d { color:#888; } .pb-line .pb-f { flex:1; }
.pb-line .pb-m { font-weight:600; }
.pb-line .pb-n { color:#aaa; font-size:11px; }
.pb-line .pb-x { color:#ccc; cursor:pointer; } .pb-line .pb-x:hover { color:#c0392b; }
.pb-empty { color:#bbb; font-size:12px; padding:6px 0; }
.pb-diffcol { display:flex; flex-direction:column; }
.pb-diff { font-size:24px; font-weight:700; margin:6px 0 2px; }
.pb-diff.danger { color:#c0392b; }
.pb-diffhint { color:#888; font-size:12px; }
.pb-src { color:#aaa; font-style:normal; font-size:11px; }
.pb-sum { color:#666; font-size:12.5px; }
.pb-sum .c-blue { color:#1e6fb8; } .pb-sum .c-teal { color:#0e9488; }
.pb-tabs { display:flex; gap:8px; margin-bottom:12px; }
.pb-tab { flex:1; padding:9px 0; border:1px solid var(--line); background:#f7f9fc; border-radius:8px; font-size:14px; cursor:pointer; color:#666; }
.pb-tab.on { background:#1e6fb8; border-color:#1e6fb8; color:#fff; font-weight:600; }
.pb-shot { display:flex; align-items:center; justify-content:center; gap:6px; height:72px; border:1px dashed #b9c6d8; border-radius:8px; color:#7a8ba3; font-size:13px; cursor:pointer; background:#f8fafc; }
.pb-shot:hover { border-color:#1e6fb8; color:#1e6fb8; }
.pb-shot-plus { font-size:22px; line-height:1; }
.pb-prev { position:relative; display:flex; }
.pb-prev img { max-width:100%; max-height:150px; border-radius:8px; border:1px solid var(--line); }
.pb-prev span { position:absolute; right:6px; top:6px; background:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2); font-size:12px; }
.pb-photo { text-decoration:none; font-size:13px; }
.pb-photo i { font-style:normal; color:#1a7af8; font-size:11px; margin-left:1px; }
.pb-pend { color:#d97706; font-style:normal; font-size:12px; }
.pb-rolls { color:#888; font-size:11.5px; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-item { display:flex; justify-content:space-between; align-items:center; padding:6px 4px; border-bottom:1px dashed #e5e9f0; }
.pf-item .danger { cursor:pointer; }
.warn { color:#e6a23c; font-weight:600; }
.ph-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; margin-top:12px; }
.ph-card { background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.ph-card img { width:100%; height:150px; object-fit:cover; display:block; cursor:zoom-in; background:#f2f4f7; }
.ph-cap { position:relative; padding:7px 26px 7px 9px; font-size:12px; color:#444; line-height:1.5; }
.ph-cap .ph-meta { color:#999; font-size:11px; word-break:break-all; }
.ph-del { position:absolute; right:8px; top:8px; cursor:pointer; color:#c0c4cc; font-size:13px; }
.ph-del:hover { color:#d0342c; }
.pima-ctlrow { display:flex; align-items:center; gap:8px; margin:10px 0 2px; flex-wrap:wrap; }
.pima-ctlrow .lb { color:#555; font-size:13px; white-space:nowrap; }
.pima-ctlrow select, .pima-ctlrow input { border:1px solid #d9d9d9; border-radius:4px; padding:5px 8px; font-size:13px; }
.pima-ctlrow #pm-target { min-width:130px; }
.pima-ctlrow #pm-adj { width:90px; }
.pima-ctlrow #pm-search { flex:1; min-width:160px; }
.pm-tag.pm-hit { background:#ffe9a8; outline:2px solid #f5b915; }
.xima-cell { background:#fdfaf2; min-width:150px; font-size:12px; color:#333; padding:3px 6px; text-align:left; }
.xima-cell.has-xima { background:#f9e9c4; }
.xima-tags { display:flex; flex-wrap:wrap; gap:3px; }
.xtag { background:#f9e9c4; border:1px solid #e6cf93; border-radius:3px; padding:1px 5px; font-size:12px; color:#333; white-space:nowrap; }
.xtag i { color:#d0342c; cursor:pointer; font-style:normal; margin-left:3px; font-size:11px; }
.xtag i:hover { color:#fff; background:#d0342c; border-radius:2px; }
.xima-in { width:86px; border:1px solid transparent; background:transparent; padding:2px 4px; font-size:12px; border-radius:2px; }
.xima-in:hover { border-color:#d8e2ee; }
.xima-in:focus { border-color:#1a7af8; background:#fff; outline:none; }
.grid td.ops { white-space:nowrap; font-size:14px; }
.grid td.ops span { cursor:pointer; margin:0 3px; user-select:none; }
.grid td.ops .op-add { color:#1a7af8; }
.grid td.ops .op-del { color:#999; }
.grid td.ops .op-del:hover { color:#d0342c; }
.ord-dates { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-top:8px; }
.ord-dates label { color:#555; }
.ord-dates input[type="date"] { min-width:150px; }
/* 选择打印信息 */
.print-sec { font-weight:600; margin:12px 0 8px; color:#555; font-size:13px; }
.print-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.opt-btn { position:relative; border:1px solid #d9d9d9; background:#fff; border-radius:4px; padding:9px 6px; font-size:13px; cursor:pointer; color:#333; }
.opt-btn:hover { border-color:#9cc3ff; }
.opt-btn.on { border-color:#1a7af8; color:#1a7af8; background:#f0f6ff; }
.opt-btn.on::after { content:''; position:absolute; right:0; bottom:0; border-style:solid; border-width:0 0 12px 12px; border-color:transparent transparent #1a7af8 transparent; }