/* ============ 体育绘图 · 网站版 ============ */
:root{
  --bg:#f2f4f7;
  --panel:#ffffff;
  --panel-2:#fafbfc;
  --line:#dfe3e8;
  --line-2:#eceff3;
  --ink:#1e2430;
  --ink-2:#5a6473;
  --ink-3:#8b95a3;
  --accent:#1967d2;
  --accent-soft:#e8f0fe;
  --danger:#d93025;
  --ok:#188038;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.06);
  --radius:8px;
  --topbar-h:48px;
  --scenes-h:104px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 "Microsoft YaHei","PingFang SC","Hiragino Sans GB",-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}

/* ---------- 顶栏 ---------- */
.topbar{
  height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:18px;
  padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line);z-index:30;
}
.brand{display:flex;align-items:center;gap:9px;color:var(--accent)}
.logo{width:28px;height:28px}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-size:15px;letter-spacing:.5px;color:var(--ink)}
.brand-txt span{font-size:10px;color:var(--ink-3)}

.menubar{display:flex;gap:2px;position:relative}
.menu{position:relative}
.menu-title{padding:6px 12px;border-radius:6px;color:var(--ink)}
.menu-title:hover{background:var(--line-2)}
.menu.open .menu-title{background:var(--accent-soft);color:var(--accent)}
.menu-drop{
  display:none;position:absolute;top:100%;left:0;min-width:214px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;z-index:60;
}
.menu.open .menu-drop{display:block}
.menu-drop button{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:6px;text-align:left;white-space:nowrap;
}
.menu-drop button:hover{background:var(--accent-soft);color:var(--accent)}
.menu-drop button i{font-style:normal;width:16px;text-align:center;opacity:.85}
.menu-drop kbd{margin-left:auto;font:11px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--ink-3)}
.menu-drop hr{border:none;border-top:1px solid var(--line-2);margin:5px 2px}

.quickbar{display:flex;align-items:center;gap:2px;margin-left:auto}
.tbtn{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;font-size:15px;color:var(--ink-2)}
.tbtn:hover{background:var(--line-2);color:var(--ink)}
.tbtn.on{background:var(--accent-soft);color:var(--accent)}
.sep{width:1px;height:20px;background:var(--line);margin:0 5px}

/* ---------- 工作区 ---------- */
.workspace{
  flex:1 1 auto;display:flex;min-height:0;
}
.panel-left,.panel-right{
  background:var(--panel);display:flex;flex-direction:column;min-height:0;
}
.panel-left{width:248px;flex:0 0 248px;border-right:1px solid var(--line)}
.panel-right{width:250px;flex:0 0 250px;border-left:1px solid var(--line);overflow:auto}

/* 素材库 */
.lib-head{padding:8px;border-bottom:1px solid var(--line-2)}
#libSearch{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);outline:none}
#libSearch:focus{border-color:var(--accent);background:#fff}
.lib-cats{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--line-2)}
.cat{padding:4px 9px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.cat:hover{border-color:var(--accent);color:var(--accent)}
.cat.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lib-body{flex:1 1 auto;overflow:auto;padding:8px}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lib-item{
  border:1px solid var(--line);border-radius:6px;background:var(--panel-2);padding:4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:grab;user-select:none;min-height:74px;justify-content:center;
}
.lib-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.lib-item svg{width:100%;height:44px;pointer-events:none}
.lib-item span{font-size:10.5px;color:var(--ink-2);text-align:center;line-height:1.25;word-break:break-all}
.lib-empty{text-align:center;color:var(--ink-3);font-size:12px;padding:20px 0}
.lib-foot{padding:6px 10px;border-top:1px solid var(--line-2);font-size:11px;color:var(--ink-3)}

/* 画布区 */
.stage{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;position:relative}
.toolrail{
  position:absolute;left:8px;top:8px;z-index:12;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column;gap:2px;
}
.rbtn{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;font-size:15px;color:var(--ink-2)}
.rbtn:hover{background:var(--line-2)}
.rbtn.active{background:var(--accent);color:#fff}
.canvas-wrap{flex:1 1 auto;overflow:hidden;position:relative;background:
  linear-gradient(45deg,#e9ecf1 25%,transparent 25%,transparent 75%,#e9ecf1 75%) 0 0/16px 16px,
  linear-gradient(45deg,#e9ecf1 25%,transparent 25%,transparent 75%,#e9ecf1 75%) 8px 8px/16px 16px,
  #f5f6f8;
}
#scene{position:absolute;left:0;top:0;transform-origin:0 0;background:#fff;box-shadow:0 2px 18px rgba(16,24,40,.14)}
#scene.panning{cursor:grabbing}
.statusbar{
  flex:0 0 auto;height:30px;display:flex;align-items:center;gap:14px;padding:0 12px;
  background:var(--panel);border-top:1px solid var(--line);font-size:12px;color:var(--ink-2);
}
.st-grow{flex:1 1 auto}
.st-zoom{display:flex;align-items:center;gap:4px}
.st-zoom button{width:24px;height:22px;border-radius:4px;color:var(--ink-2)}
.st-zoom button:hover{background:var(--line-2)}
.st-zoom button.lite{width:auto;padding:0 7px}
#stZoom{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}

/* 属性面板 */
.pr-head{
  padding:8px 12px;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--panel-2);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);letter-spacing:.5px;
}
.panel-right>.pr-head:first-child{border-top:none}
.pr-body{padding:10px 12px;display:flex;flex-direction:column;gap:9px}
.pr-empty{color:var(--ink-3);font-size:12px;text-align:center;padding:16px 0;margin:0}
.fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-2)}
.fld>span{color:var(--ink-3);font-size:11px}
.fld input,.fld select{
  padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;outline:none;width:100%;
}
.fld input:focus,.fld select:focus{border-color:var(--accent)}
.fld input[type=range]{padding:0;border:none;background:none;accent-color:var(--accent)}
.fld input[type=color]{padding:2px;height:30px;cursor:pointer}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.chk input{accent-color:var(--accent);width:14px;height:14px}
.swatches{display:flex;flex-wrap:wrap;gap:4px}
.sw{width:22px;height:22px;border-radius:5px;border:1px solid var(--line);padding:0}
.sw.on{outline:2px solid var(--accent);outline-offset:1px}
.btnrow{display:flex;gap:6px;flex-wrap:wrap}
.mini{padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);font-size:12px}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.mini.danger:hover{border-color:var(--danger);color:var(--danger)}

/* ---------- 底部场景页 ---------- */
.scenes{
  flex:0 0 auto;height:var(--scenes-h);background:var(--panel);border-top:1px solid var(--line);
  display:flex;flex-direction:column;z-index:20;
}
.scenes-head{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:var(--ink-2)}
.sbtn{padding:4px 9px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);font-size:12px}
.sbtn:hover{border-color:var(--accent);color:var(--accent)}
.sbtn.danger:hover{border-color:var(--danger);color:var(--danger)}
.scenes-head .hint{font-size:11px;color:var(--ink-3)}
.scenes-list{flex:1 1 auto;overflow:auto;display:flex;gap:8px;padding:0 12px 10px}
.scene-card{
  flex:0 0 auto;width:132px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);
  padding:5px;cursor:pointer;display:flex;flex-direction:column;gap:4px;position:relative;
}
.scene-card:hover{border-color:var(--accent)}
.scene-card.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.scene-card .thumb{height:52px;background:#fff;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;display:grid;place-items:center}
.scene-card .thumb svg{max-width:100%;max-height:100%}
.scene-card .nm{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-card .idx{position:absolute;left:-4px;top:-6px;background:var(--ink-3);color:#fff;font-size:10px;border-radius:9px;padding:0 6px}
.scene-card.on .idx{background:var(--accent)}

/* ---------- 场景内元素样式（--c 为对象颜色，由属性面板控制） ---------- */
#scene .item{--c:#2c3550}
#scene .ln{fill:none;stroke:var(--c);stroke-width:2}
#scene .ln-thin{fill:none;stroke:var(--c);stroke-width:1.2}
#scene .fill{fill:var(--c);stroke:none}
#scene .court *{vector-effect:non-scaling-stroke}
#scene .court .ln,#scene .court .ln-thin{stroke:#2c3550}
#scene .fig-line{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
#scene .fig-head{fill:var(--c);stroke:none}
#scene .fig-thin{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round}
#scene .eq-line{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#scene .eq-fill{fill:var(--c);stroke:none}
#scene .mk-line{fill:none;stroke:var(--c);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
#scene .mk-head{fill:var(--c);stroke:none}
#scene .tx{fill:var(--c);stroke:none;font-family:"Microsoft YaHei","PingFang SC",sans-serif;dominant-baseline:middle;text-anchor:middle;white-space:pre}
#scene .num-badge circle{fill:#fff;stroke:var(--c);stroke-width:1.8}
#scene .num-badge text{fill:var(--c);font-family:"Microsoft YaHei",sans-serif;text-anchor:middle;dominant-baseline:central;font-weight:700}

/* 选中与控制 */
#overlay{position:absolute;inset:0;pointer-events:none;overflow:visible}
.sel-box{fill:none;stroke:#1967d2;stroke-width:1.5;stroke-dasharray:4 3;pointer-events:none;vector-effect:non-scaling-stroke}
.sel-box-rot{fill:none;stroke:#1967d2;stroke-width:1.5;pointer-events:none;vector-effect:non-scaling-stroke}
.handle{fill:#fff;stroke:#1967d2;stroke-width:1.5;pointer-events:auto;cursor:nwse-resize;vector-effect:non-scaling-stroke}
.handle.edge{cursor:ns-resize}
.rot-handle{fill:#1967d2;stroke:#fff;stroke-width:1.5;pointer-events:auto;cursor:grab;vector-effect:non-scaling-stroke}
.rot-line{fill:none;stroke:#1967d2;stroke-width:1;pointer-events:none;vector-effect:non-scaling-stroke}
.marquee{fill:rgba(25,103,210,.10);stroke:#1967d2;stroke-width:1;stroke-dasharray:4 3;pointer-events:none}
.guide{fill:none;stroke:#d93025;stroke-width:1;stroke-dasharray:5 4;pointer-events:none}
#scene text{user-select:none}

/* ---------- 弹层 / Toast ---------- */
.modal{position:fixed;inset:0;background:rgba(16,24,40,.45);display:grid;place-items:center;z-index:200}
.modal-box{background:var(--panel);border-radius:12px;box-shadow:0 24px 60px rgba(16,24,40,.3);width:min(560px,92vw);max-height:86vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.modal-head b{font-size:15px}
.modal-head .x{margin-left:auto;font-size:15px;color:var(--ink-3);padding:2px 6px;border-radius:6px}
.modal-head .x:hover{background:var(--line-2)}
.modal-body{padding:16px;overflow:auto;font-size:13px;color:var(--ink-2);line-height:1.8}
.modal-foot{padding:12px 16px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:8px}
.btn{padding:7px 16px;border-radius:6px;background:var(--accent);color:#fff;font-size:13px}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.kbd-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.kbd-tbl td{padding:4px 8px;border-bottom:1px solid var(--line-2)}
.kbd-tbl td:first-child{white-space:nowrap;color:var(--ink);font-family:ui-monospace,Consolas,monospace;width:120px}

.toast{
  position:fixed;left:50%;bottom:calc(var(--scenes-h) + 18px);transform:translateX(-50%);
  background:#1e2430;color:#fff;padding:9px 18px;border-radius:20px;font-size:13px;z-index:300;
  box-shadow:0 8px 24px rgba(16,24,40,.28);
}

/* 缩略图内的图形样式（素材库 / 场景卡片） */
.lib-item svg *,.scene-card svg *{vector-effect:non-scaling-stroke}
.lib-item svg .ln,.scene-card svg .ln{fill:none;stroke:#2c3550;stroke-width:1.6}
.lib-item svg .ln-thin,.scene-card svg .ln-thin{fill:none;stroke:#2c3550;stroke-width:.9}
.lib-item svg .fill,.scene-card svg .fill{fill:#2c3550;stroke:none}
.lib-item svg .fig-line,.scene-card svg .fig-line{fill:none;stroke:#2c3550;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.lib-item svg .fig-head,.scene-card svg .fig-head{fill:#2c3550;stroke:none}
.lib-item svg .fig-thin,.scene-card svg .fig-thin{fill:none;stroke:#2c3550;stroke-width:3;stroke-linecap:round}
.lib-item svg .eq-line,.scene-card svg .eq-line{fill:none;stroke:#2c3550;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lib-item svg .eq-fill,.scene-card svg .eq-fill{fill:#2c3550;stroke:none}
.lib-item svg .mk-line,.scene-card svg .mk-line{fill:none;stroke:#2c3550;stroke-width:3;stroke-linecap:round}
.lib-item svg .mk-head,.scene-card svg .mk-head{fill:#2c3550;stroke:none}
.lib-item svg .tx,.scene-card svg .tx{fill:#1e2430;stroke:none;font-family:"Microsoft YaHei",sans-serif;text-anchor:middle;dominant-baseline:middle}
.lib-item svg .num-badge circle,.scene-card svg .num-badge circle{fill:#fff;stroke:#1e2430;stroke-width:1.6}
.lib-item svg .num-badge text,.scene-card svg .num-badge text{fill:#1e2430;font-family:"Microsoft YaHei",sans-serif;text-anchor:middle;dominant-baseline:central;font-weight:700}
.lib-item svg .court .ln,.scene-card svg .court .ln{stroke-width:1}
.fld textarea{padding:6px 8px;border:1px solid var(--line);border-radius:6px;resize:vertical;font-size:13px;width:100%}

/* ---------- 打印 ---------- */
.print-sheet{display:none}
@media print{
  body{overflow:visible;background:#fff}
  .topbar,.panel-left,.panel-right,.scenes,.toolrail,.statusbar,#overlay,.modal,.toast,.workspace,.stage,.canvas-wrap{display:none !important}
  .print-sheet{display:block !important;padding:6mm 8mm;color:#000}
  .ps-title{font-size:20pt;font-weight:700;text-align:center;margin-bottom:2mm}
  .ps-sub{font-size:12pt;color:#333;text-align:center;margin-bottom:5mm}
  .ps-pic{text-align:center;page-break-inside:avoid}
  .ps-pic svg{max-width:100%;height:auto}
  .ps-foot{margin-top:5mm;font-size:11pt;line-height:1.7;color:#222}
  @page{margin:12mm}
}