/* --- Root / Light Mode --- */
:root{
  --bg:#ffffff;
  --border:#dddddd;
  --input-bg:#ffffff;
  --hover:#f3f3f3;
  --btn-bg:#4c8bf5;
  --btn-hover:#3a6fd1;
  --btn-text:#ffffff;
  --text:#111;
  --result-bg:#f0f4ff;
  --result-text:#111;
}

/* --- Dark Mode --- */
.dark{
  --bg:#1e1e1e;
  --border:#444444;
  --input-bg:#2a2a2a;
  --hover:#333333;
  --btn-bg:#4c8bf5;
  --btn-hover:#3a6fd1;
  --btn-text:#ffffff;
  --text:#f2f2f2;
  --result-bg:#2a2a40;
  --result-text:#f2f2f2;
}

/* --- Converter --- */
.converter{
  width:95%;
  padding:24px;
  border-radius:14px;
  border:1px solid var(--border);
  box-sizing: border-box;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* --- Header / Theme Toggle --- */
.converter-header{
  display:flex;
  justify-content:flex-end;
  margin-bottom:12px;
}

.converter-reference {
  font-size: 0.9rem;
  color: #555;
  margin: 0 0 0.5rem 0;
  text-align:center;
}

/* --- Theme Button --- */
.theme{
  border:none;
  background:none;
  font-size:20px;
  cursor:pointer;
  opacity:.7;
  transition:opacity 0.2s;
}

.theme:hover{
  opacity:1;
}

/* --- Remove focus outline for buttons --- */
.theme:focus,
.swap:focus,
.actions button:focus{
  outline:none;
  box-shadow:none;
}

/* --- Input Fields --- */
.field{
  display:flex;
  flex-direction:column;
  margin-bottom:16px;
}

.input{
  font-size:20px;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  transition:border-color 0.2s, box-shadow 0.2s;
}

.input:focus{
  outline:none;
  border-color:#4c8bf5;
  box-shadow:0 0 6px rgba(76,139,245,0.5);
}

/* --- Swap Button --- */
.swap{
  display:block;
  margin:10px auto 16px auto;
  border:none;
  background:none;
  font-size:26px;
  cursor:pointer;
  opacity:.6;
  transition:opacity 0.2s, transform 0.1s;
  color: inherit;
}

.swap:hover{
  opacity:1;
  transform:translateY(-1px);
}

/* --- Swap lysere i dark mode --- */
.dark .swap{
  color: #f5f5f5;
  opacity: 0.9;
}

.dark .swap:hover{
  color: #ffffff;
  opacity:1;
}

/* --- Result Line --- */
.result-line{
  background:var(--result-bg);
  color:var(--result-text);
  font-weight:600;
  font-size:1.05rem;
  min-height:30px;
  line-height:30px;
  padding:10px 14px;
  border-radius:8px;
  margin:10px 0 16px 0;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:background 0.2s, color 0.2s;
  overflow:hidden;
}

/* --- Toolbar --- */
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:25px;
}

/* --- Precision Dropdown --- */
.precision{
  padding:6px 8px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
}

.precision:focus{
  outline:none;
  border-color:#4c8bf5;
  box-shadow:0 0 6px rgba(76,139,245,0.5);
}

/* --- Buttons --- */
.actions button{
  padding:10px 16px;
  border-radius:8px;
  border:none;
  font-weight:600;
  background:var(--btn-bg);
  color:var(--btn-text);
  cursor:pointer;
  margin-left:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:background 0.2s, transform 0.1s;
  position:relative;
}

.actions button:hover{
  background:var(--btn-hover);
  transform:translateY(-1px);
}

/* --- Clear Button --- */
.actions button.clear{
  background:#f4c542;
  color:#111;
}

.actions button.clear:hover{
  background:#e2b600;
}

.dark .actions button.clear{
  background:#f4c542;
  color:#111;
}

.dark .actions button.clear:hover{
  background:#e2b600;
}

/* --- Copy Tooltip --- */
.actions button.copy::after{
  content:"Copied ✓";
  font-size:12px;
  color:#fff;
  background:var(--btn-bg);
  border-radius:4px;
  padding:2px 6px;
  position:absolute;
  top:-28px;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s;
  white-space:nowrap;
  z-index:10;
}

.actions button.copy.copied::after{
  opacity:1;
}

/* --- Shortcuts Section --- */

.shortcuts{
  margin-top:18px;
  text-align:center;
}

.shortcuts-toggle{
  border:none;
  background:none;
  color:var(--btn-bg);
  font-size:0.9rem;
  cursor:pointer;
  opacity:0.85;
  transition:opacity 0.2s;
}

.shortcuts-toggle:hover{
  opacity:1;
  text-decoration:underline;
}

/* Panel */

.shortcuts-panel{
  margin-top:12px;
  padding:14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg);
  display:none;
}

/* visible state */

.shortcuts.open .shortcuts-panel{
  display:block;
}

.shortcuts-title{
  font-weight:600;
  margin-bottom:10px;
  font-size:0.95rem;
  opacity:0.9;
}

/* rows */

.shortcut{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.9rem;
  padding:4px 0;
}

.keys{
  font-family:monospace;
  background:var(--hover);
  padding:2px 6px;
  border-radius:4px;
}

.desc{
  opacity:0.8;
}

/* --- Advanced Units Section --- */
.advanced-units{
  margin-top:18px;
  text-align:center;
}

.advanced-toggle{
  border:none;
  background:none;
  color:var(--btn-bg);
  font-size:0.9rem;
  cursor:pointer;
  opacity:0.85;
  transition:opacity 0.2s;
}

.advanced-toggle:hover{
  opacity:1;
  text-decoration:underline;
}

.advanced-panel{
  margin-top:12px;
  padding:14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg);
  text-align:left;
}

.advanced.open .advanced-panel{
  display:block;
}

.advanced-panel label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  font-size:0.9rem;
}

.advanced-panel select{
  width:100%;
  padding:6px 8px;
  margin-bottom:12px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  font-size:0.95rem;
}

.advanced-panel select:focus{
  outline:none;
  border-color:#4c8bf5;
  box-shadow:0 0 6px rgba(76,139,245,0.5);
}

/* --- Responsive tweaks --- */
@media (max-width:480px){
  .converter{
    padding:16px;
  }

  .input{
    font-size:18px;
    padding:10px;
  }

  .actions button{
    padding:8px 12px;
    font-size:14px;
  }

  .swap{
    font-size:24px;
  }

  .result-line{
    font-size:1rem;
    padding:8px 10px;
  }

  .shortcuts,
  .advanced-units {
    text-align:center;
    margin-top:16px;
  }

  .shortcuts-toggle,
  .advanced-toggle {
    border:none;
    background:none;
    color:var(--btn-bg);
    font-size:0.9rem;
    cursor:pointer;
    opacity:0.85;
    transition:opacity 0.2s;
  }

  .shortcuts-toggle:hover,
  .advanced-toggle:hover {
    opacity:1;
    text-decoration:underline;
  }

  .shortcuts-panel,
  .advanced-panel {
    margin-top:12px;
    padding:12px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--input-bg);
    text-align:left;
  }
}