/* ====== 马可波罗 VI 色板 ======
     酒红 primary:  #8C1C1C   深酒红 dark: #6B1414   亮酒红 light: #A83232
     米白 cream:    #F7F1E6   卡片白:    #FFFFFF      描边:    #EBE0CF
     文字 ink:      #2C2622   次要 muted: #8C8178
  */
  :root{
    --red:#8C1C1C; --red-dark:#6B1414; --red-light:#A83232;
    --cream:#F7F1E6; --white:#FFFFFF; --line:#EBE0CF;
    --ink:#2C2622; --muted:#8C8178; --ok:#2E7D52;
    --radius:16px; --radius-sm:10px;
    --shadow:0 6px 24px rgba(108,20,20,.08);
    --shadow-sm:0 2px 8px rgba(108,20,20,.06);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
    background:var(--cream); color:var(--ink); line-height:1.6;
    font-size:15px; -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1248px;margin:0 auto;padding:28px 24px 48px;}
  .calculator-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "summary" "grout";gap:20px;align-items:start;}
  .input-card{grid-area:form;}
  .summary-column{grid-area:summary;min-width:0;}
  #groutCard{grid-area:grout;}
  .calculator-layout>*{min-width:0;}

  /* ===== Header ===== */
  header{
    background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);
    color:#fff;padding:32px 24px;
    border-bottom-left-radius:22px;border-bottom-right-radius:22px;
    box-shadow:var(--shadow);
  }
  .header-inner{max-width:1200px;margin:0 auto;}
  .brand{display:flex;align-items:center;gap:12px;}
  .logo{
    display:block;width:150px;height:50px;flex:0 0 auto;
  }
  .logo img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);}
  .head-title{margin:20px 0 0;font-size:28px;font-weight:800;letter-spacing:.5px;line-height:1.3;}
  .head-sub{margin-top:4px;font-size:13px;opacity:.88;}

  /* ===== Card ===== */
  .card{
    background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:24px;margin:0;border:1px solid var(--line);
  }
  .card h2{
    font-size:15px;margin:0 0 14px;display:flex;align-items:center;gap:8px;
    color:var(--red);font-weight:800;
  }
  .card h2 .bar{width:4px;height:16px;background:var(--red);border-radius:2px;display:inline-block;flex-shrink:0;}

  /* ===== Segmented toggle ===== */
  .seg{display:flex;background:var(--cream);border-radius:var(--radius-sm);padding:4px;gap:4px;}
  .seg button{
    flex:1;min-width:0;min-height:44px;border:0;background:transparent;padding:10px 4px;border-radius:8px;
    font-size:14px;color:var(--muted);font-weight:600;cursor:pointer;transition:.15s;
  }
  .seg button.on{background:var(--red);color:#fff;box-shadow:var(--shadow-sm);}

  /* ===== Field ===== */
  .field{margin-bottom:22px;}
  .field:last-child{margin-bottom:0;}
  .flabel{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;margin-bottom:8px;}
  .flabel .req{color:var(--red);}
  .help{
    width:16px;height:16px;border-radius:50%;border:1px solid var(--muted);
    color:var(--muted);font-size:11px;line-height:14px;text-align:center;
    cursor:pointer;flex:0 0 auto;font-weight:700;user-select:none;
  }
  .hint{font-size:12.5px;color:var(--muted);background:var(--cream);
    border-radius:8px;padding:8px 10px;margin-top:8px;display:none;border:1px dashed var(--line);}
  .hint.show{display:block;}

  /* ===== Number input ===== */
  .numbox{display:flex;align-items:center;background:var(--cream);border:1.5px solid var(--line);
    border-radius:var(--radius-sm);padding:0 12px;transition:.15s;}
  .numbox:focus-within{border-color:var(--red);background:#fff;}
  .numbox input{flex:1;border:0;background:transparent;padding:12px 0;font-size:17px;
    font-weight:700;color:var(--ink);width:100%;outline:none;}
  .numbox .unit{color:var(--muted);font-size:13px;font-weight:600;padding-left:6px;}
  .quick{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
  .quick button{border:1px solid var(--line);background:#fff;border-radius:20px;
    padding:6px 14px;font-size:13px;color:var(--muted);cursor:pointer;font-weight:600;}
  .quick button:active{background:var(--cream);}

  /* ===== Chips (规格/铺贴/等级) ===== */
  .chips{display:flex;flex-wrap:wrap;gap:8px;}
  .chip{
    border:1.5px solid var(--line);background:#fff;border-radius:10px;
    padding:11px 12px;min-height:44px;font-size:13.5px;cursor:pointer;font-weight:600;color:var(--ink);text-align:left;
    transition:.15s;display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;
  }
  .chip small{font-size:11px;color:var(--muted);font-weight:500;}
  .chip.on{border-color:var(--red);background:#FBEDED;color:var(--red);}
  .chip.on small{color:var(--red-light);}

  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .mini-input{display:flex;align-items:center;background:var(--cream);border:1.5px solid var(--line);
    border-radius:var(--radius-sm);padding:0 10px;}
  .mini-input input{border:0;background:transparent;padding:10px 0;font-size:15px;width:100%;outline:none;font-weight:700;}
  .mini-input span{color:var(--muted);font-size:12px;}

  /* ===== Result ===== */
  .result .row{display:flex;align-items:baseline;justify-content:space-between;
    padding:14px 0;border-bottom:1px dashed var(--line);}
  .result .row:last-child{border-bottom:0;}
  .result .rname{font-size:14px;font-weight:700;}
  .result .rname small{display:block;font-size:12px;color:var(--muted);font-weight:500;}
  .result .rval{text-align:right;}
  .result .num{font-size:30px;font-weight:800;color:var(--red);line-height:1;}
  .result .num u{font-size:14px;font-weight:700;text-decoration:none;margin-left:3px;color:var(--red-light);}
  .result .sub{font-size:12.5px;color:var(--muted);margin-top:4px;}
  .detail{margin-top:6px;font-size:12.5px;color:var(--muted);background:var(--cream);
    border-radius:8px;padding:10px 12px;display:none;}
  .detail.show{display:block;}
  .detail div{display:flex;justify-content:space-between;gap:12px;padding:2px 0;}
  .detail div span:last-child{text-align:right;overflow-wrap:anywhere;min-width:0;}
  .toggle-detail{font-size:12.5px;color:var(--red);cursor:pointer;font-weight:600;margin-top:6px;display:inline-block;}

  .notice{background:#FBEDED;border:1px solid #F0CFCF;border-radius:var(--radius-sm);
    padding:12px 14px;font-size:12.5px;color:#7a2a2a;margin-top:14px;}
  .notice b{color:var(--red);}

  /* ===== Buttons ===== */
  .actions{display:flex;gap:10px;margin-top:16px;}
  .save-history{display:block;width:100%;margin-top:16px;}
  button:disabled{opacity:.5;cursor:not-allowed;}
  .history-card{margin-top:24px;}
  .history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .history-heading h2{margin:0;}
  .history-heading small{font-size:12px;font-weight:500;color:var(--muted);}
  .history-note,.history-status{font-size:12.5px;color:var(--muted);}
  .history-note{margin:12px 0;}
  .history-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .history-empty{margin:16px 0 0;padding:24px 12px;text-align:center;background:var(--cream);border-radius:10px;font-size:13px;color:var(--muted);}
  .history-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-height:440px;overflow:auto;overscroll-behavior:contain;margin-top:12px;}
  .history-item{padding:16px;border:1px solid var(--line);border-radius:10px;min-width:0;}
  .history-item h3{font-size:15px;margin:0 0 4px;overflow-wrap:anywhere;}
  .history-item-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;}
  .history-item-heading h3{flex:1;min-width:0;margin:0;}
  .history-title{display:flex;align-items:flex-start;gap:8px;cursor:pointer;}
  .history-title span{min-width:0;overflow-wrap:anywhere;}
  .history-title input,.history-select-all input{width:17px;height:17px;flex-shrink:0;margin:3px 0 0;accent-color:var(--red);cursor:pointer;}
  .history-item.is-selected{border-color:var(--red);background:#fffbf8;}
  .history-export-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;background:var(--cream);border-radius:10px;margin-bottom:12px;}
  .history-select-all{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;}
  .history-selection{flex:1;min-width:120px;font-size:12.5px;color:var(--muted);}
  .history-export-bar .history-export{flex:0 0 auto;padding:10px 16px;font-size:13px;min-height:40px;}
  @media(max-width:599px){.history-export-bar .history-export{flex-basis:100%;}.history-selection{min-width:0;}}
  .history-item-heading .history-rename-button{flex-shrink:0;padding:0;line-height:24px;}
  .history-meta,.history-summary{font-size:12.5px;color:var(--muted);margin:6px 0;overflow-wrap:anywhere;}
  .history-summary{color:var(--red);font-weight:600;}
  .history-controls{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;}
  .history-rename{display:flex;flex:1 0 100%;align-items:center;flex-wrap:wrap;gap:12px;margin:4px 0 8px;}
  .history-rename[hidden]{display:none;}
  .history-rename input{flex:1 1 100%;min-width:0;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:16px;color:var(--ink);background:var(--cream);}
  .history-rename input:focus{outline:2px solid var(--red-light);outline-offset:2px;}
  .history-link{padding:6px 0;border:0;background:transparent;color:var(--red);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
  .history-link[hidden]{display:none;}
  @media(min-width:960px){.history-list{grid-template-columns:repeat(2,minmax(0,1fr));}.history-heading h2{margin:0;}}
  .btn{flex:1;border:0;border-radius:var(--radius-sm);padding:13px 0;font-size:14.5px;
    font-weight:700;cursor:pointer;transition:.15s;}
  .btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-sm);}
  .btn-primary:active{background:var(--red-dark);}
  .btn-ghost{background:#fff;color:var(--red);border:1.5px solid var(--red);}
  .disclaimer{font-size:12px;color:var(--muted);margin-top:28px;line-height:1.8;
    border-top:1px solid var(--line);padding-top:20px;}
  .section-toggle{font-size:13px;color:var(--red);font-weight:700;cursor:pointer;
    display:inline-flex;align-items:center;gap:4px;margin-top:4px;}
  footer{text-align:center;font-size:11.5px;color:var(--muted);margin-top:22px;}

  /* ===== 填缝剂/美缝剂 折叠区（非重点） ===== */
  .grout-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;
    user-select:none;padding:2px 0;}
  .grout-head h2{margin:0;}
  .grout-arrow{font-size:16px;color:var(--red);font-weight:700;transition:.15s;}
  .grout-note{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.6;}
  .inherit{font-size:13.5px;color:var(--ink);background:var(--cream);border:1px solid var(--line);
    border-radius:var(--radius-sm);padding:10px 12px;font-weight:600;line-height:1.5;}
  .inherit b{color:var(--red);}

  button,input{font-family:inherit;}
  .logo{text-decoration:none;}
  button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red-light);outline-offset:3px;}
  .mini-input,.grid2>*,.numbox input{min-width:0;}
  .mini-input input{font-size:16px;}
  .mini-input span{flex-shrink:0;}
  .result .row{gap:12px;}
  .rval{min-width:0;overflow-wrap:anywhere;}
  #chipsSpec,#chipsLayout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  #chipsGrade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .chip small{margin-top:3px;}
  .result .row{align-items:flex-start;}
  .result .rname{flex:1;min-width:0;}
  .result .rval{flex:1.1;}

  /* Phones and tablets share one reading column. */
  @media(max-width:959px){
    .wrap{max-width:760px;}
    .header-inner{max-width:712px;}
  }
  @media(min-width:960px){
    .header-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;}
    .heading-copy{text-align:right;}
    .head-title{margin:0;font-size:32px;}
    .head-sub{margin-top:8px;}
    .calculator-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"form summary" "grout summary";gap:24px;}
    .summary-column{position:sticky;top:24px;}
    .card h2{font-size:17px;margin-bottom:22px;}
    #resultCard .num{font-size:42px;}
    #resultCard .row{padding:20px 0;}
    #resultCard .notice{margin-top:22px;}
  }
  @media(min-width:1200px){
    #chipsSpec,#chipsLayout{grid-template-columns:repeat(4,minmax(0,1fr));}
  }
  @media(max-width:599px){
    header{padding:22px 16px 24px;}
    .head-title{font-size:24px;}
    .wrap{padding:18px 16px 32px;}
    .calculator-layout{gap:16px;}
    .card{padding:20px 16px;}
    .field{margin-bottom:20px;}
    .quick{gap:6px;}
    .quick button{flex:1;padding:7px 6px;min-height:36px;}
    .chip{padding:10px 8px;font-size:13px;}
    .chip small{font-size:10.5px;}
    .result .num{font-size:32px;}
    .grout-head h2{font-size:14px;}
    .seg button{font-size:13px;}
  }
  @media(max-width:359px){
    .wrap{padding-left:10px;padding-right:10px;}
    .card{padding:18px 12px;}
    #chipsGrade{grid-template-columns:minmax(0,1fr);}
    #chipsGrade .chip{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;}
    #chipsGrade .chip small{margin:0;}
    .seg button{font-size:12px;}
    .brand{gap:8px;}
  }
  /* Keep an expanded summary reachable on short desktop windows. */
  @media(min-width:960px) and (max-height:760px){
    .summary-column{position:static;}
  }