:root {
  /* Nexus Design System: Light (Warm Beige) */
  --bg-body: #F4F1ED;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --text-main: #1A1A1A;
  --text-muted: #666666;
  --accent: #01696F;
  --accent-hover: #015257;
  --accent-text: #FFFFFF;
  --border: #E5E0D8;
  --warning-bg: #FFF7EB;
  --warning-border: #F5D5A6;
  --warning-text: #A6690B;
  --danger: #DC3545;
  --danger-hover: #B02A37;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-overlay: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  
  --radius: 8px;

  /* Fluid type */
  --text-sm: clamp(0.75rem, 0.17vw + 0.70rem, 0.875rem);
  --text-base: clamp(0.875rem, 0.34vw + 0.80rem, 1rem);
  --text-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --text-xl: clamp(1.5rem, 1vw + 1.2rem, 1.8rem);
}

[data-theme="dark"] {
  /* Nexus Design System: Dark (Charcoal) */
  --bg-body: #111111;
  --bg-card: #1C1C1C;
  --bg-elevated: #242424;
  --text-main: #EFEFEF;
  --text-muted: #999999;
  --accent: #018E96;
  --accent-hover: #01A3AD;
  --border: #333333;
  --warning-bg: #2B200A;
  --warning-border: #5C4516;
  --warning-text: #E8A83A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
  --shadow-overlay: 0 25px 50px -12px rgba(0,0,0,0.8);
}

/* Core Resets */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Satoshi', sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  transition: background-color 0.2s, color 0.2s;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-4);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-4);
}
header h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
#theme-toggle { background: transparent; border: none; font-size: var(--text-lg); cursor: pointer; }

/* Buttons & Inputs */
.btn {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn:hover { background: var(--bg-elevated); border-color: var(--text-muted); }
.primary-btn { background: var(--accent); color: var(--accent-text); border: none; }
.primary-btn:hover { background: var(--accent-hover); border: none;}
.danger-btn { background: transparent; color: var(--text-muted); border: none; padding: var(--space-1); }
.danger-btn:hover { color: var(--danger); background: transparent; }

input, textarea, select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-body);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input[readonly] { background: transparent; border-color: transparent; pointer-events: none; padding-left: 0; }

/* Add URL Bar */
.url-input-container {
  display: flex; gap: var(--space-2); margin-bottom: var(--space-5);
}
.url-input-container input { flex: 1; padding: 14px 18px; border-radius: 12px; border: none; box-shadow: var(--shadow-sm); background: var(--bg-card); }
.url-input-container .primary-btn { padding: 14px 24px; border-radius: 12px; }

/* Controls */
.controls { display: flex; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3); }
.controls select { width: auto; background: var(--bg-card); border-color: transparent; box-shadow: var(--shadow-sm); }

/* Grid & Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.card {
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-image-wrap { width: 100%; aspect-ratio: 4/3; background: var(--bg-body); position: relative; overflow: hidden; }
.card-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-img { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color: var(--text-muted); font-size: 2rem;}
.store-badge { position: absolute; top: var(--space-2); left: var(--space-2); background: rgba(0,0,0,0.6); color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; backdrop-filter: blur(4px); font-weight: 500; }
.card-content { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; gap: var(--space-2); }
.card-title { font-size: var(--text-base); font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-price { font-size: var(--text-lg); font-weight: 700; color: var(--accent); }
.card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); }
.tag { background: var(--bg-body); padding: 2px 8px; border-radius: 6px; color: var(--text-muted); }
.priority-1 { color: #d93d3d; } .priority-2 { color: #f59e0b; } .priority-3 { color: #10b981; }

.card-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding: var(--space-2) var(--space-3); background: var(--bg-body); }
.card-actions button { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.1rem; }
.card-actions button:hover { color: var(--text-main); }

/* Dialog Modal */
dialog { border: none; background: transparent; margin: auto; padding: 0; max-width: 500px; width: 90%; }
dialog::backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); }
.dialog-content { background: var(--bg-card); padding: var(--space-4); border-radius: 16px; box-shadow: var(--shadow-overlay); color: var(--text-main); }
.dialog-content h2 { margin-bottom: var(--space-4); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em;}
.form-group { margin-bottom: var(--space-3); }
.form-group label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); margin-bottom: var(--space-1); }
.row { display: flex; gap: var(--space-3); }
.row .form-group { flex: 1; }
.input-wrapper { display: flex; align-items: center; position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-body); transition: border-color 0.2s;}
.input-wrapper:focus-within { border-color: var(--accent); }
.input-wrapper input { border: none; background: transparent; }
.edit-unlock-btn { background: none; border: none; padding: 0 var(--space-2); cursor: pointer; color: var(--text-muted); }
.edit-unlock-btn:hover { color: var(--text-main); }

/* Partial State Warning */
.group-partial .input-wrapper { border-color: var(--warning-border); background: var(--warning-bg); }
.group-partial .input-wrapper input { color: var(--text-main); }
.group-partial .warning-msg { display: block; color: var(--warning-text); font-size: 0.75rem; margin-top: 4px; }
.group-partial .edit-unlock-btn { display: none; } /* already unlocked */
.group-locked .input-wrapper { border-color: transparent; }
.group-locked input { pointer-events: none; }

.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: var(--space-3); opacity: 0.5; }
.empty-state h3 { font-size: var(--text-lg); color: var(--text-main); margin-bottom: var(--space-1); }
.hidden { display: none !important; }

/* Skeletons */
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.2; } }
.skeleton-card { background: var(--bg-card); border-radius: 12px; height: 300px; animation: pulse 1.5s infinite; }
.skeleton-loader { background: var(--border); border-radius: 4px; animation: pulse 1.5s infinite; margin-bottom: var(--space-2); }
.loader-image { height: 160px; width: 100%; border-radius: 8px; }
.loader-title { height: 24px; width: 80%; }
.loader-price { height: 20px; width: 40%; }
.loader-text { font-size: var(--text-sm); color: var(--text-muted); text-align: center; margin-top: var(--space-2); }