/* Page-specific styles for glass-calculator.html */
  #glass-calc-root {
    --deep: #0D1026;
    --deep-2: #171B3D;
    --deep-3: #06070F;
    --leaf: #35AD51;
    --leaf-dark: #248238;
    --leaf-light: #8FD9A1;
    --sand: #F6F1E6;
    --sand-line: #E1D8C4;
    --ink: #12142A;
    --ink-soft: #565A72;
    --paper: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
  }
  #glass-calc-root *{ box-sizing: border-box; }
  #glass-calc-root h1, #glass-calc-root h2, #glass-calc-root h3, #glass-calc-root h4 {
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--deep); margin: 0;
  }
  #glass-calc-root a { text-decoration: none; }
  #glass-calc-root section { padding: 60px 40px; display: block !important; }
  #glass-calc-root .kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--leaf-dark); margin: 0 0 16px; background: rgba(53,173,81,0.12); padding: 7px 14px 7px 10px; border-radius: 20px;
  }
  #glass-calc-root .kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }

  /* ============ PAGE HEADER ============ */
  #glass-calc-root .page-header {
    position: relative; overflow: hidden;
    background: radial-gradient(130% 150% at 20% 0%, #142542 0%, var(--deep) 45%, var(--deep-3) 100%);
    padding: 76px 40px 36px; text-align: center;
  }
  #glass-calc-root .page-header h1 { font-size: clamp(28px, 4vw, 42px); color: #fff; line-height: 1.2; }
  #glass-calc-root .page-header p { max-width: 620px; margin: 16px auto 0; color: #B9C1D6; font-size: 14.5px; line-height: 1.7; }

  #glass-calc-root .tool-head { max-width: 680px; margin: 0 auto 36px; text-align: center; }
  #glass-calc-root .tool-head h2 { font-size: clamp(22px, 3vw, 28px); }
  #glass-calc-root .tool-head p { font-size: 14px; color: var(--ink-soft); margin: 12px auto 0; line-height: 1.7; max-width: 540px; }
  #glass-calc-root .tool-panel { background: var(--paper); }
  #glass-calc-root .tool-panel:nth-of-type(even) { background: var(--sand); }
  #glass-calc-root .tool-card {
    max-width: 880px; margin: 0 auto; background: var(--paper); border: 1px solid var(--sand-line); border-radius: 20px;
    padding: 36px; box-shadow: 0 1px 2px rgba(11,59,76,0.03), 0 14px 30px -22px rgba(11,59,76,0.18);
  }
  #glass-calc-root .section-label {
    font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--leaf-dark);
    margin-bottom: 16px;
  }

  /* ============ FORM FIELDS ============ */
  #glass-calc-root .field-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  #glass-calc-root .field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  #glass-calc-root .field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
  #glass-calc-root .field input, #glass-calc-root .field select {
    width: 100%; font-family: 'Inter', sans-serif; font-size: 14.5px; padding: 11px 13px; border-radius: 10px;
    border: 1.5px solid var(--sand-line); background: var(--sand); color: var(--ink); cursor: pointer;
  }
  #glass-calc-root .field input { cursor: text; }
  #glass-calc-root .field input:focus, #glass-calc-root .field select:focus { outline: none; border-color: var(--leaf); }
  #glass-calc-root .field-note { font-size: 12px; color: var(--ink-soft); margin: 14px 2px 0; }
  #glass-calc-root .divider { border-top: 1px solid var(--sand-line); margin: 26px 0; }

  /* ============ CUTTING LIST ============ */
  #glass-calc-root .cut-list { border: 1px solid var(--sand-line); border-radius: 14px; overflow: hidden; }
  #glass-calc-root .cut-head-row {
    display: grid; grid-template-columns: 1.4fr 0.6fr 1.6fr; gap: 10px; padding: 12px 16px;
    background: var(--sand); border-bottom: 1px solid var(--sand-line);
  }
  #glass-calc-root .cut-head-row span {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
  }
  #glass-calc-root .cut-row {
    display: grid; grid-template-columns: 1.4fr 0.6fr 1.6fr; gap: 10px; align-items: center;
    padding: 16px; border-bottom: 1px solid var(--sand-line);
  }
  #glass-calc-root .cut-row:last-child { border-bottom: none; }
  #glass-calc-root .cut-empty { text-align: center; color: var(--ink-soft); padding: 24px; font-size: 13.5px; }
  #glass-calc-root .part-name { font-weight: 700; color: var(--deep); font-size: 14.5px; }
  #glass-calc-root .part-qty {
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px;
    background: #EAF3DE; color: var(--leaf-dark); border-radius: 8px; font-weight: 700; font-size: 13px; width: fit-content;
  }
  #glass-calc-root .part-dims { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--deep); font-size: 15px; white-space: nowrap; }
  #glass-calc-root .part-dims .x { color: var(--ink-soft); font-family: 'Inter', sans-serif; font-weight: 400; margin: 0 6px; }
  #glass-calc-root .part-unit { font-size: 11.5px; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-weight: 400; margin-left: 4px; }

  @media (max-width: 560px) {
    #glass-calc-root .cut-head-row { display: none; }
    #glass-calc-root .cut-row {
      grid-template-columns: 1fr; row-gap: 8px; position: relative; padding: 16px 16px 16px 16px;
    }
    #glass-calc-root .part-name { grid-row: 1; }
    #glass-calc-root .part-qty { grid-row: 1; position: absolute; top: 16px; right: 16px; }
    #glass-calc-root .part-dims { grid-row: 2; white-space: normal; }
  }

  /* ============ SPECIFICATIONS ============ */
  #glass-calc-root .spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  #glass-calc-root .spec {
    background: var(--sand); border-radius: 13px; padding: 16px 14px; text-align: center;
  }
  #glass-calc-root .spec .s-val { font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 700; color: var(--deep); }
  #glass-calc-root .spec .s-label { font-size: 10.5px; color: var(--ink-soft); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.4; }
  #glass-calc-root .spec.hero { background: var(--deep); grid-column: span 3; padding: 22px; }
  #glass-calc-root .spec.hero .s-val { color: var(--leaf-light); font-size: 30px; }
  #glass-calc-root .spec.hero .s-label { color: #B9C1D6; }

  @media (max-width: 720px) {
    #glass-calc-root .field-grid { grid-template-columns: 1fr 1fr; }
    #glass-calc-root .field-grid.cols-3 { grid-template-columns: 1fr 1fr; }
    #glass-calc-root .spec-grid { grid-template-columns: 1fr 1fr; }
    #glass-calc-root .spec.hero { grid-column: span 2; }
  }
  @media (max-width: 480px) {
    #glass-calc-root .field-grid, #glass-calc-root .field-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  }