/* ============================================================
   价值007工具箱 - 小学家长工具专用样式
   用于：认时钟 / 竖式 / 看拼音写词语 / 空白练习纸 / 课程表 / 分数
   ============================================================ */

/* ---------- 通用小控件 ---------- */
.x-xs{font-size:13px;color:#94a3b8}
.x-sub{font-size:13px;color:#64748b;margin:-2px 0 10px}
.x-hint{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 12px;font-size:13px;color:#1e40af;margin:10px 0}

/* ---------- 认时钟 ---------- */
.clock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:14px 0}
.clock-item{text-align:center;border:1px dashed #e5e7eb;border-radius:10px;padding:8px 4px}
.clock-item svg{width:100%;max-width:104px;height:auto}
.clock-ans{font-size:13px;color:#94a3b8;margin-top:6px;letter-spacing:1px}
.clock-key{color:#dc2626;font-size:15px;font-weight:600}
.clock-face{fill:#fff;stroke:#1e293b;stroke-width:2}
.clock-tick{stroke:#cbd5e1;stroke-width:1}
.clock-tick5{stroke:#64748b;stroke-width:2}
.clock-num{font-size:11px;fill:#1e293b;font-family:Arial,sans-serif;font-weight:600}
.clock-h{stroke:#1e293b;stroke-width:4;stroke-linecap:round}
.clock-m{stroke:#2563eb;stroke-width:2.6;stroke-linecap:round}
.clock-dot{fill:#1e293b}

/* ---------- 竖式计算 ---------- */
.ss-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 16px;margin:14px 0}
.ss-item{font-family:Consolas,"Courier New",monospace;font-size:17px;line-height:1.5;
         font-variant-numeric:tabular-nums}
.ss-row{text-align:right;white-space:nowrap}
.ss-op{display:inline-block;width:1.15em;text-align:left;color:#2563eb;font-weight:700}
.ss-rule{border-bottom:1.6px solid #1e293b;height:0;margin:3px 0 0 auto;width:100%}
.ss-ans{text-align:right;white-space:nowrap;color:#dc2626}

/* ---------- 田字格 / 米字格 / 拼音格 ---------- */
.paper-grid{display:flex;flex-wrap:wrap;gap:0;margin:12px 0}
.tz{position:relative;box-sizing:border-box;border:1px solid #94a3b8;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:KaiTi,STKaiti,serif;color:#1e293b;overflow:hidden}
.tz::before{content:"";position:absolute;left:0;right:0;top:50%;height:0;border-top:1px dashed #f0abfc}
.tz::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:0;border-left:1px dashed #f0abfc}
.tz.mi::before{transform:rotate(45deg);width:141%;left:-20%}
.tz.mi::after{transform:rotate(-45deg);height:141%;top:-20%}
.tz .glyph{position:relative;z-index:1;line-height:1}
.tz.trace .glyph{color:#e8c8d8}

/* 拼音四线三格 */
.py-line{position:relative;box-sizing:border-box;border:1px solid #cbd5e1;
         border-top:none;border-bottom:none;display:inline-flex;align-items:center;
         justify-content:center;font-family:Arial,sans-serif;color:#1e293b}
.py-line::before,.py-line::after{content:"";position:absolute;left:0;right:0;height:0;border-top:1px dashed #f0abfc}
.py-line::before{top:33.33%}
.py-line::after{top:66.66%}

/* 方格 / 横线 */
.fg{border:1px solid #cbd5e1;box-sizing:border-box;display:inline-block}
.hx{border-bottom:1px solid #cbd5e1;box-sizing:border-box;display:block}

/* ---------- 看拼音写词语 ---------- */
.py-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 26px;margin:14px 0}
.py-item{font-family:Arial,sans-serif}
.py-word{font-size:15px;color:#2563eb;letter-spacing:1px;margin-bottom:4px;height:22px}
.py-boxes{display:flex;gap:2px}
.py-box{width:40px;height:40px;position:relative;border:1px solid #94a3b8;box-sizing:border-box}
.py-box::before{content:"";position:absolute;left:0;right:0;top:50%;height:0;border-top:1px dashed #f0abfc}
.py-box::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:0;border-left:1px dashed #f0abfc}

/* ---------- 分数 ---------- */
.fr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 14px;margin:14px 0}
.fr-item{display:flex;align-items:center;justify-content:center;gap:3px;font-size:17px;
         font-family:Georgia,serif}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;
    line-height:1.1;margin:0 2px}
.fr .num{border-bottom:1.6px solid #1e293b;padding:0 3px}
.fr .den{padding:0 3px}
.fr-key{color:#dc2626}

/* ---------- 课程表 ---------- */
.kb-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0;table-layout:fixed}
.kb-table th,.kb-table td{border:1px solid #cbd5e1;padding:6px 4px;text-align:center;
                          height:32px;word-break:break-all}
.kb-table th{background:#f0f7ff;font-weight:600;color:#1e293b}
.kb-table td{background:#fff}
.kb-table td[contenteditable]:focus{outline:2px solid #2563eb;background:#f8fbff}
.kb-table .kb-time{background:#f8fafc;color:#64748b;font-size:12px;width:62px}
.kb-table .kb-sep td{background:#eef2f7;font-weight:600;color:#475569;font-size:12px;height:24px}

/* ---------- 打印 ---------- */
@media print{
  .paper-grid,.clock-grid,.ss-grid,.py-grid,.fr-grid,.kb-table{page-break-inside:auto}
  .clock-item{border-color:#e5e7eb}
  .clock-h{stroke:#000}
  .clock-m{stroke:#333}
  .kb-table td[contenteditable]:focus{outline:none;background:#fff}
  .x-hint,.x-sub{display:none}
  .tz::before,.tz::after,.py-box::before,.py-box::after,
  .py-line::before,.py-line::after{border-color:#d9b8d4!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media(max-width:600px){
  .clock-grid{grid-template-columns:repeat(2,1fr)}
  .ss-grid{grid-template-columns:repeat(2,1fr)}
  .fr-grid{grid-template-columns:repeat(2,1fr)}
  .py-grid{grid-template-columns:1fr}
  .py-box{width:34px;height:34px}
}