.equation-row {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}

.eq-new-btn {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  align-self: end;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

.equation-row {
  display: grid;
  grid-template-columns: 220px 1fr 2fr;
  gap: 18px;
  align-items: end;
  margin-bottom: 12px;
  margin-top: 18px;
}

.solve-label {
  margin-bottom: 2px;
}

.equation-display {
  width: 100%;
}
.action-card.eq-new-btn {
  background: #e3f2fd !important;
  border: 2px solid #90caf9 !important;
  color: #222 !important;
}
.equation-row {
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-rows: auto 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 12px;
}

.solve-label {
  grid-column: 1 / span 2;
  align-self: start;
  margin-bottom: 2px;
}

.eq-new-btn {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  box-sizing: border-box;
  background: #e3f2fd;
  color: #222;
  border: 2px solid #90caf9;
}

.equation-display {
  grid-row: 2;
  grid-column: 2;
  width: 100%;
}
/* Overstyrer global .equation-row for denne appen */
.equation-row {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.equation-display {
  grid-column: 2;
  width: 100%;
}

.eq-new-btn {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  box-sizing: border-box;
}
.top-row select.toprow-card {
  font-size: 0.80em;
}
/* Consistent style for top-row controls */
.top-row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}
.toprow-card {
  height: 40px;
  font-size: 1em;
  border-radius: 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  margin: 0 6px 0 0;
  width: 100%;
}
.top-row .action-card.toprow-card {
  flex: 3 1 0;
}
.top-row .toprow-card#eqTypeSelect,
.top-row .toprow-card#singleDifficultySelect {
  flex: 1 1 0;
}

            /* Make select look like button */
            .toprow-card select,
            .toprow-card {
              border: 1.5px solid #1976d2;
              background: #f5faff;
              color: #1a237e;
              transition: box-shadow 0.15s;
            }
            .toprow-card:focus,
            .toprow-card select:focus {
              outline: none;
              box-shadow: 0 0 0 2px #90caf9;
            }
            .eqtype-option {
              position: relative;
              display: flex;
              align-items: center;
              gap: 8px;
            }
            .difficulty-hover {
              display: none;
            }
            .eqtype-option:hover .difficulty-hover,
            .eqtype-option:focus-within .difficulty-hover {
              display: inline-block;
            }
            .difficulty-select {
              font-size: 14px;
              padding: 2px 6px;
              border-radius: 5px;
              border: 1px solid #1976d2;
              background: #f5faff;
              color: #1976d2;
              outline: none;
              vertical-align: middle;
            }
            .eqtype-single-difficulty {
              margin-top: 10px;
              padding: 6px 16px 2px 16px;
              font-size: 15px;
              color: #1976d2;
              text-align: left;
            }
        .action-card#eqTypeBtn {
          position: relative;
          cursor: pointer;
          user-select: none;
        }
        .eqtype-popup {
          position: absolute;
          top: 100%;
          left: 0;
          min-width: 160px;
          background: #fff;
          border: 1px solid #1976d2;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.12);
          z-index: 10;
          margin-top: 4px;
          padding: 4px 0;
          text-align: left;
        }
        .eqtype-option {
          padding: 8px 16px;
          cursor: pointer;
          font-size: 15px;
          color: #1976d2;
          transition: background 0.15s;
        }
        .eqtype-option:hover {
          background: #e3f2fd;
        }
    .hint-row {
      display: flex;
      gap: 10px;
      margin-top: 8px;
    }
    .hint-row .hint-btn {
      flex: 1;
      min-width: 0;
      width: auto;
      height: 38px;
      font-size: 12px;
      padding: 0 8px;
    }
/* Likningsapp Styles - Generated from CoPilot LikningsappV3.2 */

:root{
  --bg: #f8e3e2;
  --bar-top: #5d7fb0;
  --bar-bottom: #4bbbd0;
  --panel: #ffffffcc;
  --shadow: rgba(0,0,0,.12);
  --btn: #e9eef3;
  --btn-border: #3b5a2a;
  --accent: #8bd34a;
  --text: #1c2b33;

  --tile-pos: rgba(90, 170, 255, 0.22);
  --tile-neg: rgba(90, 170, 255, 0.10);
  --tile-stroke: #2f5c7a;

  --circle-pos: rgba(255, 190, 90, 0.28);
  --circle-neg: rgba(255, 190, 90, 0.12);
  --circle-stroke: #7a4d1f;
}

*{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
    }
    header, footer{
      width:100%;
      text-align:center;
      color:#fff;
      font-weight:700;
      padding:10px 12px;
    }
    header{ background: var(--bar-top); }
    footer{ background: var(--bar-bottom); }

    .double-underline {
      border-bottom: 3px double #000;
      padding-bottom: 2px;
    }

    .app{
      max-width: 1180px;
      margin: 0 auto;
      padding: 14px 14px 24px;
    }

    /* Top */
    .top-row{
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .top-row .action-card {
      flex: 1 1 0;
      min-width: 0;
      height: 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .solve-label{
      font-size: 18px;
      font-weight: 800;
      padding-left:6px;
    }
    .equation-display{
      background:#fff;
      border: 2px solid #333;
      border-radius: 6px;
      padding: 14px 16px;
      min-height: 64px;
      box-shadow: 0 2px 0 var(--shadow);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .action-card{
      background: #fff;
      border: 2px solid #333;
      border-radius: 8px;
      padding: 10px 12px;
      box-shadow: 0 2px 0 var(--shadow);
      text-align:center;
      font-weight:700;
      font-size: 13px;
      line-height: 1.2;
      cursor:pointer;
      user-select:none;
    }
    .action-card small{
      display:block;
      font-weight:600;
      opacity:.8;
      margin-top:4px;
    }

    /* Main grid: left controls, middle input, right "paper calc" */
    .mid{
      margin-top: 14px;
      display:grid;
      grid-template-columns: 380px 1fr;
      grid-auto-rows: auto;
      gap: 14px;
      align-items:start;
    }

    /* Stack op-panel above input-panel, same width */
    .op-panel{
      grid-column: 1;
      grid-row: 1;
    }
    .input-panel{
      grid-column: 1;
      grid-row: 2;
    }
    .paper{
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    /* Operation toggles + variable */
    .op-panel{
      background: var(--panel);
      border: 2px solid #3b5a70;
      border-radius: 8px;
      padding: 10px;
      box-shadow: 0 2px 0 var(--shadow);
    }
    .op-panel h3{
      margin: 0 0 10px;
      font-size: 14px;
      font-weight: 900;
    }
    .ops{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .op-btn{
      padding: 10px 12px;
      border: 2px solid #3b5a70;
      border-radius: 8px;
      background: var(--btn);
      font-weight: 900;
      cursor:pointer;
      text-align:center;
      user-select:none;
    }
    .op-btn.active{
      outline: 3px solid rgba(75,187,208,.35);
      background: #dceff5;
    }

    .var-row{
      display:flex;
      gap: 10px;
      align-items:center;
      margin-top: 12px;
    }
    .var-row label{
      font-weight: 900;
      font-size: 13px;
      width: 72px;
    }
    select{
      flex:1;
      padding: 9px 10px;
      border: 2px solid #333;
      border-radius: 6px;
      background:#fff;
      font-weight: 800;
    }

    /* Input */
    .input-panel{
      background:#fff;
      border: 2px solid #333;
      border-radius: 8px;
      padding: 12px;
      box-shadow: 0 2px 0 var(--shadow);
    }
    .input-panel label{
      display:block;
      font-weight: 800;
      margin-bottom: 8px;
    }
    input[type="text"]{
      width:100%;
      padding: 10px 10px;
      border: 2px solid #333;
      border-radius: 6px;
      font-size: 14px;
    }
    #operandInput{
      font-size: 24px;
      text-align: center;
      font-weight: 700;
      padding: 16px 10px;
    }
    .input-with-stepper{
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .stepper-btn{
      width: 40px;
      height: 40px;
      background: var(--btn);
      border: 2px solid var(--btn-border);
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
    }
    .stepper-btn:hover{
      background: #d0dce6;
    }
    .stepper-btn:active{
      transform: translateY(1px);
    }
    .input-with-stepper #operandInput{
      flex: 1;
    }
    .help{
      margin-top: 8px;
      font-size: 12px;
      opacity: .75;
      line-height:1.25;
    }
    .error{
      margin-top: 10px;
      font-size: 13px;
      font-weight: 800;
      color: #a11;
      min-height: 18px;
    }
    .strategy{
      margin-top: 8px;
      font-size: 12px;
      font-weight: 800;
      min-height: 18px;
    }
    .strategy.info{ color: #1c2b33; }
    .strategy.good{ color: #1f7a1f; }
    .strategy.optimal{ color: #0d6d0d; font-weight: 900; }
    .strategy.suboptimal{ color: #c68500; }
    .strategy.wrong{ color: #c11; }
    .strategy.warn{ color: #a15a00; }

    .btn-row{
      margin-top: 12px;
      display:flex;
      gap: 10px;
    }
    .do-btn {
      flex-basis: 66.66%;
      flex-grow: 2;
      height: 44px;
      border-radius: 8px;
      font-weight: 900;
      cursor:pointer;
      box-shadow: 0 3px 0 rgba(0,0,0,.12);
      border: 2px solid #2b5a2b;
      background: var(--accent);
    }
    .undo-btn {
      flex-basis: 33.33%;
      flex-grow: 1;
      height: 44px;
      border-radius: 8px;
      font-weight: 900;
      cursor:pointer;
      box-shadow: 0 3px 0 rgba(0,0,0,.12);
      border: 2px solid #2b5a2b;
      background:#fff;
      border-color:#555;
    }
    .hint-btn{
      width: 100%;
      margin-top: 8px;
      height: 38px;
      border-radius: 8px;
      font-weight: 800;
      cursor: pointer;
      background: #e3f2fd;
      border: 2px solid #1976d2;
      color: #1976d2;
      box-shadow: 0 2px 0 rgba(0,0,0,.08);
      transition: all 0.2s;
    }
    .hint-btn:hover{
      background: #bbdefb;
      transform: translateY(-1px);
      box-shadow: 0 3px 0 rgba(0,0,0,.12);
    }
    .hint-box{
      margin-top: 12px;
      padding: 12px 14px;
      background: #fff9e6;
      border: 2px solid #f9a825;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.4;
      color: #3e2723;
      display: none;
      box-shadow: 0 2px 4px rgba(0,0,0,.08);
    }
    .hint-box.show{
      display: block;
    }
    .hint-box strong{
      color: #f57c00;
    }

    /* Paper-style calculation box */
    .paper{
      background:#fff;
      border: 2px solid #333;
      border-radius: 18px;
      padding: 16px 18px;
      box-shadow: 0 2px 0 var(--shadow);
      min-height: 420px;
      position:relative;
      overflow:hidden;
    }
    .paper h2{
      margin:0;
      font-size: 22px;
      font-weight: 900;
    }
    .paper .paper-hint{
      position:absolute;
      top: 16px;
      right: 18px;
      font-size: 12px;
      opacity:.75;
      text-align:right;
    }

    .calc-steps{
      margin-top: 18px;
    }
    .calc-block{
      padding: 10px 0;
    }
    .calc-row,
    .calc-row-after{
      display:grid;
      grid-template-columns: minmax(100px, 1fr) 40px minmax(100px, 0.8fr) minmax(80px, 120px) minmax(150px, 2fr);
      align-items:center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .calc-left, .calc-right{
      min-height: 36px;
      display: flex;
      align-items: center;
      padding: 4px 8px;
    }
    .calc-left{ justify-content: flex-end; padding-right: 16px; }
    .calc-right{ justify-content: flex-start; }
    .calc-equals{
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
    }
    .calc-op{
      min-height: 36px;
      opacity: .95;
      text-align: center;
    }
    .calc-history{
      min-height: 36px;
      font-size: 11px;
      line-height: 1.3;
      opacity: .85;
      text-align: left;
      padding-left: 8px;
    }
    .calc-history::first-line{
      font-weight: 900;
    }
    /* New comment styling for strategy feedback */
    .hist-action{ font-weight: 900; }
    .hist-comment{ display:block; margin-top:4px; }
    .comment-opt{ color:#0d6d0d; font-weight:900; }
    .comment-sub{ color:#c68500; }
    .rule{
      height: 2px;
      background: #333;
      opacity:.45;
      margin: 10px 0;
    }

    .paper-footer{
      position:absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      text-align:center;
      font-size: 18px;
      font-weight: 900;
    }

    /* Scale */
    .scale-wrap{
      margin-top: 14px;
      background: var(--panel);
      border: 2px solid #3b5a70;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 2px 0 var(--shadow);
    }
    .scale-title{
      font-weight: 900;
      font-size: 13px;
      margin-bottom: 8px;
      opacity:.9;
    }
    .scale{
      position: relative;
      height: 240px;
      border-radius: 12px;
      background: rgba(218,236,243,0.65);
      overflow:hidden;
    }
    .base{
      position:absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 12px;
      width: 180px;
      height: 26px;
      background: #2f6a86;
      border-radius: 12px;
      box-shadow: 0 3px 0 rgba(0,0,0,.12);
    }
    .pillar{
      position:absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 38px;
      width: 64px;
      height: 76px;
      background: #ffffffcc;
      border: 3px solid #2f6a86;
      border-bottom: none;
      border-radius: 40px 40px 0 0;
    }
    .beam{
      position:absolute;
      left: 50%;
      top: 86px;
      width: 520px;
      height: 14px;
      background: #2f6a86;
      transform-origin: center;
      transform: translateX(-50%) rotate(0deg);
      border-radius: 10px;
    }
    .beam::before, .beam::after{
      content:"";
      position:absolute;
      top: 14px;
      width: 6px;
      height: 42px;
      background: #2f6a86;
    }
    .beam::before{ left: 60px; }
    .beam::after{ right: 60px; }

    .pan{
      position:absolute;
      top: 138px;
      width: 240px;
      height: 70px;
      border: 3px solid #2f6a86;
      border-radius: 0 0 16px 16px;
      background: rgba(255,255,255,.55);
      box-shadow: 0 2px 0 rgba(0,0,0,.1);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 10px;
    }
    .pan.left{ left: 80px; }
    .pan.right{ right: 80px; }

    .tokens{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items:center;
      justify-content:center;
      width:100%;
    }

    .token{
      width: 44px;
      height: 44px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      border: 3px solid;
      color: #123;
      user-select:none;
      position: relative;
      transform: translateY(0);
      opacity: 1;
    }
    .token.circle{ border-radius: 999px; }
    .token.square{ border-radius: 10px; }

    .token.pos.circle{
      background: var(--circle-pos);
      border-color: var(--circle-stroke);
    }
    .token.neg.circle{
      background: var(--circle-neg);
      border-color: var(--circle-stroke);
      border-style: dashed;
      opacity: .75;
    }
    .token.pos.square{
      background: var(--tile-pos);
      border-color: var(--tile-stroke);
    }
    .token.neg.square{
      background: var(--tile-neg);
      border-color: var(--tile-stroke);
      border-style: dashed;
      opacity: .75;
    }

    @keyframes popIn {
      0%   { transform: translateY(-18px) scale(.85); opacity: 0; }
      60%  { transform: translateY(2px) scale(1.05); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    @keyframes fadeOut {
      0%   { transform: scale(1); opacity: 1; }
      100% { transform: scale(.7); opacity: 0; }
    }
    .animate-in{ animation: popIn 420ms ease-out; }
    .animate-out{ animation: fadeOut 320ms ease-in forwards; }

    /* Toggleable explanation/history panel */
    .below-scale{
      margin-top: 10px;
      display:flex;
      justify-content:flex-end;
      gap: 10px;
    }
    .toggle-btn{
      padding: 10px 12px;
      border-radius: 10px;
      border: 2px solid #3b5a70;
      background:#fff;
      font-weight: 900;
      cursor:pointer;
    }
    .explain{
      margin-top: 10px;
      background:#fff;
      border: 2px solid #333;
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 2px 0 var(--shadow);
      display:none;
    }
    .explain.show{ display:block; }
    .explain h3{
      margin:0 0 10px;
      font-size: 16px;
      font-weight: 900;
    }
    .explain ol{
      margin:0;
      padding-left: 18px;
      line-height:1.35;
    }

    /* Math display styling */
    .equation-display{
      font-size: 1.5em;
    }
    .calc-left, .calc-right, .calc-equals, .calc-op{
      font-size: 1.35em;
    }
    /* Use math fonts with fallbacks */
    .equation-display,
    .calc-left,
    .calc-right,
    .calc-equals,
    .calc-op{
      font-family: 'Times New Roman', 'Cambria Math', 'Latin Modern Math', serif;
      line-height: 1.4;
    }
    /* Variables italic, numbers upright */
    .m-var{ font-style: italic; }
    .m-num{ font-style: normal; }
    .m-op{ font-style: normal; }
    .m-func{ font-style: normal; }
    /* Superscript for exponents */
    .m-sup{
      font-size: 0.70em;
      line-height: 1;
      vertical-align: super;
      position: relative;
      top: -0.25em; /* raise higher above base */
      margin-left: 1px;
    }
    /* Extra spacing around operators for readability */
    .m-op.m-op-add,
    .m-op.m-op-sub,
    .m-op.m-op-div{ margin: 0 8px; display:inline-block; }
    .m-op.m-op-mul{ margin: 0 5px; display:inline-block; }
    .m-op.m-op-paren{ margin: 0 2px; display:inline-block; }
    .m-op.m-op-eq{ margin: 0 10px; display:inline-block; }
    .m-op.m-op-bar{ margin: 0 6px; display:inline-block; }

    /* Admin mode box */
    .admin-box{
      /*position: fixed;*/
      /*display: flex;*/
      right: 0;
      top: 70px;
      right: 14px;
      background: #fff;
      border: 2px solid #333;
      border-radius: 8px;
      padding: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
      z-index: 1000;
      min-width: 220px;
    }
    .admin-box h4{
      margin: 0 0 10px;
      font-size: 13px;
      font-weight: 900;
    }
    .admin-row{
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      align-items: center;
    }
    .admin-row label{
      font-size: 12px;
      font-weight: 800;
      min-width: 60px;
    }
    #equationTypeSelect{
      flex: 1;
      padding: 6px 8px;
      border: 2px solid #333;
      border-radius: 4px;
      background: #fff;
      font-weight: 700;
      font-size: 12px;
    }
    .admin-row button{
      width: 100%;
      padding: 8px 10px;
      border: 2px solid #2b5a2b;
      border-radius: 6px;
      background: var(--accent);
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
    }
    .admin-row button:hover{
      background: #7ac039;
    }

    /* Fraction display */
    .fraction-container{
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      margin: 0 2px;
    }
    .numerator{
      text-align: center;
      padding-bottom: 4px;
      border-bottom: 2px solid currentColor;
      padding-top: 2px;
    }
    .denominator{
      text-align: center;
      padding-top: 4px;
    }

    @media (max-width: 980px){
      .top-row{ grid-template-columns: 1fr; }
      .mid{ grid-template-columns: 1fr; }
      .beam{ width: 92%; }
      .pan.left{ left: 20px; }
      .pan.right{ right: 20px; }
    }