:root {
  --bg: #f7fafc;
  --surface: #ffffff;
  --surface-2: #f2f6ff;
  --text: #19212a;
  --text-soft: #4b5563;
  --primary: #2c7be5;
  --primary-600: #1b6ad6;
  --primary-50: #eaf3ff;
  --accent: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --muted: #e5e7eb;
  --ring: rgba(44, 123, 229, 0.35);
  --shadow: 0 10px 25px rgba(16, 24, 40, 0.08);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1118;
    --surface: #101827;
    --surface-2: #0f1a2b;
    --text: #f3f4f6;
    --text-soft: #cbd5e1;
    --primary: #4da3ff;
    --primary-600: #3b8be0;
    --primary-50: #06203f;
    --accent: #22d3a3;
    --warning: #fbbf24;
    --danger: #f87171;
    --muted: #273244;
    --ring: rgba(77, 163, 255, 0.35);
    --shadow: 0 12px 30px rgba(2, 8, 20, 0.5);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, var(--primary-50), transparent 60%), var(--bg);
  line-height: 1.45;
}

a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; display: block; }

.app { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  backdrop-filter: saturate(180%) blur(12px);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border-bottom: 1px solid var(--muted);
}

.brand { display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.2px; }
.brand .logo { display:flex; align-items:center; justify-content:center; }
.brand .logo svg { width:24px; height:24px; fill:#fff; opacity:.95; }

.user-area { display:flex; align-items:center; gap:.75rem; font-size:.95rem; color:var(--text-soft); }
.pill { background: var(--surface-2); border:1px solid var(--muted); padding:.4rem .75rem; border-radius:999px; }

.btn { appearance:none; border:0; padding:.75rem 1rem; border-radius:12px; background:var(--primary); color:#fff; font-weight:600; cursor:pointer; box-shadow:var(--shadow); transition:transform .04s, filter .2s, background .2s; }
.btn:hover { filter:brightness(1.03); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--muted); box-shadow:none; }
.btn.warn { background:var(--danger); }

.lang {
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--muted); border-radius:999px; padding:.25rem .5rem; background:var(--surface-2);
}
.lang select { border:0; background:transparent; font-weight:600; outline:none; }

.container { padding:clamp(1rem, 4vw, 2rem); max-width:1200px; margin:0 auto; width:100%; display:grid; grid-template-columns:300px 1fr; gap:1.25rem; }
@media (max-width:980px){ .container{ grid-template-columns:1fr; } }

.panel { background:var(--surface); border:1px solid var(--muted); border-radius:var(--radius); padding:.75rem; position:sticky; top:calc(64px + 1rem); height:fit-content; box-shadow:var(--shadow); }

.tab { display:flex; align-items:center; gap:.75rem; padding:.8rem .9rem; border-radius:12px; color:var(--text); margin:.25rem; border:1px solid transparent; cursor:pointer; transition:background .2s, border-color .2s; }
.tab:hover { background:var(--surface-2); }
.tab.active { background:linear-gradient(180deg, var(--primary-50), transparent 90%); border-color:var(--primary); }
.tab svg { width:20px; height:20px; }

.card { background:var(--surface); border:1px solid var(--muted); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); }

.grid { display:grid; gap:1rem; grid-template-columns:repeat(12, 1fr); }
.span-12 { grid-column:span 12; }
.span-6 { grid-column:span 6; }
.span-4 { grid-column:span 4; }
.span-8 { grid-column:span 8; }
@media (max-width:980px){ .span-6, .span-4, .span-8 { grid-column: span 12; } }

.section-title { display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px; margin:.25rem 0 1rem; }
.section-title .dot { width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 6px color-mix(in oklab, var(--primary) 20%, transparent); }

.form { display:grid; gap:.9rem; }
.row { display:grid; gap:.75rem; grid-template-columns: repeat(12, 1fr); align-items:end; }
.field { grid-column: span 12; }
.field.half { grid-column: span 6; }

.label { font-size:.88rem; color:var(--text-soft); margin-bottom:.35rem; display:block; }

.input, .select, .file {
  width:100%; padding:.8rem .9rem; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--muted); color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.input:focus, .select:focus, .file:focus { border-color:var(--primary); box-shadow:0 0 0 6px var(--ring); background: color-mix(in oklab, var(--surface-2) 60%, transparent); }

.hint { font-size:.8rem; color:var(--text-soft); margin-top:.2rem; }

.dropzone { border:2px dashed var(--muted); background: color-mix(in oklab, var(--surface-2) 70%, transparent); border-radius:16px; padding:1rem; text-align:center; transition:border-color .2s, background .2s; }
.dropzone.dragover { border-color:var(--primary); background: color-mix(in oklab, var(--primary-50) 90%, transparent); }

.gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:.75rem; max-height:420px; overflow:auto; padding-right:.25rem; }

    .img-card { border:1px solid var(--muted); border-radius:12px; overflow:hidden; background:var(--surface-2); display:grid; grid-template-rows:auto auto; box-shadow:var(--shadow); }
    .img-card img { width:100%; height:140px; object-fit:cover; }
    .img-card.deletable { cursor: pointer; position: relative; transition: transform 0.2s, box-shadow 0.2s; }
    .img-card.deletable:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); border-color: var(--danger); }
    .img-card.deletable::after { content: '🗑️'; position: absolute; top: 0.5rem; right: 0.5rem; background: var(--danger); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; font-size: 1rem; }
    .img-card.deletable:hover::after { opacity: 1; }

    .caption { font-size:.8rem; color:var(--text-soft); padding:.5rem .6rem; border-top:1px solid var(--muted); }#authView { display:grid; place-items:center; min-height:calc(100vh - 72px); padding:2rem; }

.auth-card { width:min(760px, 100%); display:grid; gap:1rem; grid-template-columns:1fr 1fr; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--muted); background: radial-gradient(600px 280px at 110% 10%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 60%), var(--surface); box-shadow:var(--shadow); }

.auth-side { padding: clamp(1rem, 3vw, 1.25rem) clamp(1rem, 4vw, 1.5rem); display:grid; align-content:center; gap:1rem; }

.auth-hero { background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 12%, transparent), transparent), radial-gradient(700px 320px at -10% 10%, var(--primary-50), transparent 60%), var(--surface-2); padding:1.25rem; display:grid; gap:1rem; align-content:center; }

.kpi { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.kpi .mini { border:1px solid var(--muted); border-radius:12px; padding:.9rem; background:var(--surface); text-align:center; }
.kpi .mini b { font-size:1.35rem; display:block; }

@media (max-width:760px){ .auth-card { grid-template-columns:1fr; } }

.toast { position:fixed; right:16px; bottom:16px; display:grid; gap:.5rem; z-index:999; }
.toast .t { background:var(--surface); border:1px solid var(--muted); border-left:6px solid var(--primary); border-radius:12px; padding:.75rem .9rem; box-shadow:var(--shadow); min-width:260px; animation: slideIn .3s ease; }
.toast .t.ok { border-left-color: var(--accent); }
.toast .t.err { border-left-color: var(--danger); }

@keyframes slideIn { from{ transform: translateY(10px); opacity:0; } to{ transform: translateY(0); opacity:1; } }

.skeleton { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--muted) 30%, transparent), transparent); animation: shine 1.1s ease-in-out infinite; border-radius:10px; }

@keyframes shine { 0% { background-position:-200px 0; } 100% { background-position:200px 0; } }

.muted { color:var(--text-soft); }
.center { text-align:center; }
.mt-8 { margin-top:.8rem; }
.mt-12 { margin-top:1.2rem; }
.hidden { display:none !important; }

.bodymap-wrap { position: relative; display: inline-block; }
.bodymap-wrap .marker { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(34, 211, 163, 0.3), 0 4px 12px rgba(0,0,0,0.3); transform: translate(-50%, -50%); pointer-events: none; animation: pulse 1.5s ease-in-out infinite; }
.bodymap-wrap .mole-marker { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3), 0 4px 12px rgba(0,0,0,0.3); transform: translate(-50%, -50%); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.bodymap-wrap .mole-marker:hover { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.4), 0 6px 16px rgba(0,0,0,0.4); }
.bodymap-wrap .mole-marker.active { background: var(--primary); box-shadow: 0 0 0 5px rgba(44, 123, 229, 0.4), 0 6px 16px rgba(0,0,0,0.4); }

.comment-item { padding: 0.75rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--muted); margin-bottom: 0.5rem; }
.comment-item.private { border-left: 4px solid var(--warning); }
.comment-item.shared { border-left: 4px solid var(--accent); }
    .comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--text-soft); }

    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(34, 211, 163, 0.3), 0 4px 12px rgba(0,0,0,0.3); } 50% { box-shadow: 0 0 0 8px rgba(34, 211, 163, 0.2), 0 4px 12px rgba(0,0,0,0.3); } }

    /* Timeline styles */
    .timeline-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .timeline-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .timeline-wrapper { position: relative; overflow: auto; border: 1px solid var(--muted); border-radius: 12px; background: var(--surface-2); padding: 1rem; max-height: 600px; scroll-behavior: smooth; transition: all 0.3s ease; }
    .timeline-wrapper.fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; max-height: 100vh; border-radius: 0; margin: 0; }
    .timeline-content { display: flex; flex-direction: column; gap: 2rem; min-width: max-content; padding-bottom: 1rem; }
    
    .mole-timeline-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--muted); box-shadow: var(--shadow); }
    .mole-timeline-header { min-width: 200px; max-width: 200px; padding-right: 1rem; border-right: 2px solid var(--primary); }
    .mole-timeline-header h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--primary); }
    .mole-timeline-header .mole-info { font-size: 0.85rem; color: var(--text-soft); }
    
    .mole-timeline-images { display: flex; gap: 1rem; overflow-x: visible; flex: 1; }
    .timeline-image-group { display: flex; flex-direction: column; gap: 0.5rem; min-width: 220px; }
    .timeline-image-card { position: relative; border: 1px solid var(--muted); border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
    .timeline-image-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
    .timeline-image-card img { width: 220px; height: 180px; object-fit: cover; display: block; }
    .timeline-image-date { padding: 0.5rem; font-size: 0.75rem; color: var(--text-soft); text-align: center; border-top: 1px solid var(--muted); background: var(--surface); }
    .timeline-image-comments { padding: 0.5rem; max-height: 120px; overflow-y: auto; }
    .timeline-comment { padding: 0.5rem; border-radius: 6px; background: var(--surface-2); margin-bottom: 0.25rem; font-size: 0.8rem; border-left: 3px solid var(--accent); }
    .timeline-comment.private { border-left-color: var(--warning); }
    .timeline-comment-text { color: var(--text); margin-bottom: 0.25rem; }
    .timeline-comment-meta { font-size: 0.7rem; color: var(--text-soft); }
    .timeline-empty { text-align: center; padding: 3rem; color: var(--text-soft); }
    
    .timeline-date-marker { position: sticky; left: 0; z-index: 2; background: var(--primary); color: #fff; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; width: fit-content; margin-bottom: 0.5rem; box-shadow: var(--shadow); }
    
    .timeline-wrapper.fullscreen .timeline-controls { position: fixed; top: 1rem; right: 1rem; z-index: 1000; background: var(--surface); padding: 0.5rem; border-radius: 12px; box-shadow: var(--shadow); }
    .timeline-wrapper::-webkit-scrollbar { width: 12px; height: 12px; }
    .timeline-wrapper::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 6px; }
    .timeline-wrapper::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 6px; }
    .timeline-wrapper::-webkit-scrollbar-thumb:hover { background: var(--primary-600); }
    
    .exit-fullscreen-btn { position: fixed; top: 1rem; left: 1rem; z-index: 1001; background: var(--danger); color: #fff; border: none; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 0.5rem; transition: transform 0.2s, background 0.2s; }
    .exit-fullscreen-btn:hover { background: #dc2626; transform: translateY(-2px); }
    .exit-fullscreen-btn:active { transform: translateY(0); }
    .timeline-wrapper:not(.fullscreen) .exit-fullscreen-btn { display: none !important; }
    .timeline-wrapper.fullscreen .exit-fullscreen-btn { display: flex !important; }
    
    .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--card-bg);
      padding: 1rem;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      z-index: 9999;
      text-align: center;
      border-top: 2px solid var(--primary);
    }
    .cookie-banner p { display: inline; margin-right: 1rem; }
    .cookie-banner button { margin: 0 0.5rem; }
    .cookie-banner a { color: var(--primary); margin-left: 0.5rem; }
    
    @media (max-width: 980px) {
      .mole-timeline-row { flex-direction: column; }
      .mole-timeline-header { max-width: 100%; border-right: none; border-bottom: 2px solid var(--primary); padding-right: 0; padding-bottom: 1rem; }
      .mole-timeline-images { overflow-x: auto; }
    }

    .feature { display:flex; align-items:center; gap:.6rem; padding-left: 1rem; position: relative; }
    .feature:before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; font-size: 1.2rem; }
    .feature .text { display:flex; flex-direction:column; }
    
    /* Improved feature list styling - cleaner, more readable */
    .feature-item { 
      display: flex; 
      flex-direction: column;
      gap: 0.25rem; 
      padding: 0.75rem 1rem; 
      background: var(--surface-1);
      border-radius: 8px;
      border-left: 3px solid var(--primary);
      transition: all 0.2s ease;
    }
    .feature-item:hover {
      background: var(--surface-2);
      border-left-color: var(--accent);
    }
    .feature-item strong { 
      font-size: 0.95rem; 
      color: var(--text-primary);
      font-weight: 600;
    }
    .feature-item span { 
      font-size: 0.85rem; 
      color: var(--text-muted);
      opacity: 0.9;
    }

/* Toggle Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 26px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #00897B;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

input:disabled + .slider {
  opacity: 0.5;
  cursor: not-allowed;
}