:root{
  --ui-font: 16px;
  --ui-pad: 7px;
  --ui-gap: 7px;
}

body{
  font-family: system-ui, Arial, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 14px 12px 28px;
  background: #000;
  color: #4da3ff;
  font-size: var(--ui-font);
  line-height: 1.3;
}

h1{ margin:0; font-size: 22px; color:#4da3ff; }
h2{ margin:0; font-size: 20px; color:#ffa500; }


.titleLink {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}


.topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 6px 0 12px;
}

.iconGroup{ display:flex; gap: 8px; }

.iconBtn{
  width: 44px;
  height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 2px solid #4da3ff;
  border-radius: 14px;
  color:#4da3ff;
  background:#000;
  text-decoration:none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.iconBtn:active{ transform: scale(0.96); opacity: 0.9; }

.bar{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 14px;
}
.bar a{
  padding: 14px 12px;
  border: 2px solid #4da3ff;
  border-radius: 14px;
  text-decoration:none;
  text-align:center;
  color:#4da3ff;
  font-weight: 650;
  background:#000;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 420px){
  .bar{ grid-template-columns: 1fr; }
}

.card{
  background:#0a0a0a;
  border: 2px solid #1e1e1e;
  border-radius: 16px;
  padding: 14px;
  margin-top: 12px;
}

.titleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.titleActions{ display:flex; gap: 8px; align-items:center; }

ul{ list-style:none; padding:0; margin:0; }

li{
  display:flex;
  align-items:center;
  gap: var(--ui-gap);
  padding: var(--ui-pad) 6px;
  border-bottom: 1px solid #1e1e1e;
}
li:last-child{ border-bottom:0; }

input[type=checkbox]{
  width: calc(var(--ui-font) + 2px);
  height: calc(var(--ui-font) + 2px);
  accent-color:#ffa500;
}

.itemLink{
  color: inherit;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.itemLink:active{ opacity: 0.7; }

.itemText{
  display:block;
  word-break: break-word;
}

.checked{
  text-decoration: line-through;
  color:#ffa500;
  opacity: 0.85;
}

/* Small per-item delete button */
.itemDelBtn{
  width: 38px;
  height: 38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 2px solid #1e1e1e;
  border-radius: 12px;
  background: #000;
  color: #ffa500;
  font-size: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.itemDelBtn:active{ transform: scale(0.96); opacity: 0.9; }

/* Camera button sits next to the per-item delete button.
   Styling is inherited from .iconBtn + .itemDelBtn so it matches perfectly. */
.itemImgBtn{ user-select:none; }

/* Full-screen image viewer */
.imgOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 9999;
}
.imgOverlay.open{ display:flex; }

.imgModal{
  width: min(900px, 100%);
}

.imgStage{
  text-align: center;
}

.imgStage img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 2px solid #1e1e1e;
}

@media (max-width: 600px) {
  .printOnly { display: none; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; }
  .topRow, .iconGroup, .bar, .titleActions, .itemDelBtn, .itemImgBtn, .imgOverlay { display: none !important; }
  .card { border: none; background: #fff; padding: 0; margin: 0; }
  h1, h2 { color: #000; }
  li { border-bottom: 1px solid #ccc; padding: 6px 0; }
  input[type=checkbox] { display: none; }
  a { color: #000; text-decoration: none; }
}