/* CSS Design System & Style Tokens for LinkDeck (Pixel-Perfect to Screenshot) */

:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Inter', -apple-system, sans-serif;
  
  /* Very soft, premium light blue-grey gradient as seen in screenshot */
  --bg-mesh-gradient: linear-gradient(180deg, #e8f5ff 0%, #d8edfe 50%, #e5f2ff 100%);
  
  --color-primary: #1e293b;
  --color-secondary: #64748b;
  --color-accent: #1e293b;
  
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 32px 0 rgba(148, 163, 184, 0.08);
  --glass-blur: blur(20px);
  
  /* Clean, rounded white cards exactly like the screenshot */
  --card-bg: #ffffff;
  --card-bg-hover: #ffffff;
  --card-border: rgba(255, 255, 255, 0.8);
  --card-shadow: 0 4px 12px rgba(148, 163, 184, 0.12);
  
  --text-main: #334155;
  --text-muted: #64748b;
  
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
  
  /* Sizing and Scaling custom properties */
  --tile-scale: 1.0;
  --grid-columns: 7;
  --grid-rows: 5;
  --grid-dot-color: rgba(0, 0, 0, 0.07);
  --grid-cell-border: rgba(30, 41, 59, 0.15); /* Significantly bolder, slate-blue tinted border for amazing contrast */
  --grid-cell-bg: rgba(30, 41, 59, 0.02); /* Bolder cell shading */
  --content-scale: 1.0; /* Content scale (Icons & Font Size) completely decoupled from backing size! */
  --tile-padding: calc(0.75rem * var(--tile-scale));
  --tile-font-size: calc(0.78rem * var(--content-scale));
  --tile-domain-size: calc(0.66rem * var(--content-scale));
  --grid-gap: calc(12px * var(--tile-scale));
  --logo-scale: 1.3;
  --clock-scale: 1.0;
  --search-scale: 1.0;
  --tabs-scale: 1.0;
}

/* Dark Mode Overrides (if chosen in settings) */
[data-theme="dark"] {
  --color-primary: #f8fafc;
  --color-secondary: #94a3b8;
  --glass-bg: rgba(15, 23, 42, 0.6);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  
  --card-bg: rgba(30, 41, 59, 0.7);
  --card-bg-hover: rgba(30, 41, 59, 0.9);
  --card-border: rgba(255, 255, 255, 0.05);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --grid-dot-color: rgba(255, 255, 255, 0.12);
  --grid-cell-border: rgba(255, 255, 255, 0.28); /* Significantly bolder white glow borders */
  --grid-cell-bg: rgba(255, 255, 255, 0.04); /* Deeper background boxes for dark theme dark backgrounds */
}

/* Reset and Global Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background-color: #f1f5f9;
  color: var(--text-main);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  transition: var(--transition-smooth);
}

/* Background Gradients */
.bg-mesh {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-mesh-gradient);
  z-index: -2;
  transition: background 0.8s ease-in-out;
}

.bg-mesh.has-custom-img {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, rgba(216, 237, 254, 0.1) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Main Container */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 2rem 3rem 6rem 3rem;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Logo "🚀 LinkDeck" Top-Left Position */
.app-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  min-height: 80px;
}

/* Absolute top-left logo */
.brand-logo-container {
  position: absolute;
  left: 0;
  top: 4px; /* Balanced top offset for the larger logo */
  display: flex;
  align-items: center;
  gap: calc(16px * var(--logo-scale));
  user-select: none;
  transform-origin: left center;
  transition: var(--transition-smooth);
}

.brand-logo-emoji {
  font-size: calc(2.4rem * var(--logo-scale)); /* Doubled from 1.2rem */
  display: inline-block;
  line-height: 1;
  transition: var(--transition-smooth);
}

.brand-logo-img {
  width: calc(40px * var(--logo-scale)); /* Doubled from 20px */
  height: calc(40px * var(--logo-scale)); /* Doubled from 20px */
  object-fit: contain;
}

.brand-name {
  font-family: var(--font-main);
  font-size: calc(2.4rem * var(--logo-scale)); /* Doubled from 1.2rem */
  font-weight: 800;
  color: #1d4ed8; /* Blue brand color */
  letter-spacing: -0.02em;
  transition: var(--transition-smooth);
}

.brand-subtitle {
  font-size: calc(0.7rem * var(--logo-scale)); /* Doubled from 0.35rem */
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: calc(-2px * var(--logo-scale));
  display: block;
  font-family: var(--font-main);
  transition: var(--transition-smooth);
}

/* Clock in Header */
.clock-widget {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  transition: var(--transition-smooth);
}

.clock-time {
  font-family: var(--font-display);
  font-size: calc(3.5rem * var(--clock-scale));
  font-weight: 500;
  color: #1e293b;
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: var(--transition-smooth);
}

.clock-date {
  font-family: var(--font-main);
  font-size: calc(0.75rem * var(--clock-scale));
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748b;
  text-transform: uppercase;
  margin-top: calc(0.2rem * var(--clock-scale));
  transition: var(--transition-smooth);
}

/* Search Bar Styles */
.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: calc(550px * var(--search-scale)); /* Increased 30% from 420px */
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(148, 163, 184, 0.08);
  padding: 0 calc(1.6rem * var(--search-scale)); /* Scaled padding */
  height: calc(54px * var(--search-scale)); /* Increased 30% from 422px */
  transition: var(--transition-smooth);
}

.search-wrapper:focus-within {
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(148, 163, 184, 0.15);
}

/* Search icon on the right as seen in screenshot */
.search-icon {
  width: calc(1.3rem * var(--search-scale)); /* Scaled icon width */
  height: calc(1.3rem * var(--search-scale)); /* Scaled icon height */
  color: #3b82f6;
  order: 2; /* Pushes to the right */
  margin-left: auto;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

#search-input {
  width: 100%;
  padding: calc(0.8rem * var(--search-scale)) 0;
  background: none;
  border: none;
  outline: none;
  color: #1e293b;
  font-family: var(--font-main);
  font-size: calc(1.1rem * var(--search-scale)); /* Increased 30% from 0.85rem */
  font-weight: 500;
  order: 1; /* Input on the left */
  text-align: center; /* Centered placeholder & input text */
  transition: var(--transition-smooth);
}

#search-input::placeholder {
  color: #94a3b8;
  opacity: 0.9;
}

.search-clear-btn {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  order: 3;
  margin-left: 4px;
  transition: var(--transition-fast);
}

/* Workspaces Tabs Style */
.workspaces-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.workspaces-tabs {
  display: flex;
  gap: 1.15rem; /* Increased 1.5x for larger tabs layout spacing */
  background: transparent;
  padding: 6px;
  border-radius: 50px;
  overflow-x: auto;
}

.workspace-tab {
  background: none;
  border: 1px solid transparent;
  outline: none;
  padding: calc(0.75rem * var(--tabs-scale)) calc(1.85rem * var(--tabs-scale)); /* Increased 1.5x padding */
  border-radius: 50px;
  color: #64748b;
  font-family: var(--font-main);
  font-size: calc(1.425rem * var(--tabs-scale)); /* Increased 1.5x from 0.95rem for premium readability */
  font-weight: 700; /* Extra crisp font weight */
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.workspace-tab:hover {
  color: #1e293b;
}

/* Active Tab exactly like screenshot: White rounded button with a thin dark/grey border */
.workspace-tab.active {
  color: #0f172a;
  background: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.05);
}

/* Bookmarks Grid (Standard 10 Columns or auto-fill) */
.bookmarks-section {
  flex-grow: 1;
}

.bookmarks-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, calc(155px * var(--tile-scale)))); /* Shrinkable: never forces horizontal overflow */
  max-width: 100%;
  grid-template-rows: repeat(var(--grid-rows), calc(115px * var(--tile-scale))); /* Explicit rows height grid matching desktop */
  justify-content: center; /* Centered layout */
  gap: var(--grid-gap);
  width: 100%;
  min-height: 550px;
  position: relative;
  border-radius: 16px;
  padding: 10px;
  transition: var(--transition-smooth);
}

.grid-cell-placeholder {
  border: 2px dashed var(--grid-cell-border, rgba(30, 41, 59, 0.15));
  background: var(--grid-cell-bg, rgba(30, 41, 59, 0.02));
  border-radius: 18px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transition: var(--transition-smooth);
}

/* Bookmarks Tile Core Layout */
.bookmark-tile {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px; /* Organic soft rounded corners matching screenshot */
  padding: calc(1rem * var(--tile-scale));
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centered items vertically for balanced spacing */
  align-items: center;
  text-decoration: none;
  color: #334155;
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
  cursor: pointer;
  position: relative;
  user-select: none;
  overflow: hidden;
  aspect-ratio: 1.35 / 1; /* Beautiful horizontal rounded rectangles */
  gap: calc(10px * var(--tile-scale)); /* Clean spacing between icon and text */
}

/* Tile Custom layouts & Sizes */
.bookmark-tile.size-small {
  grid-column: span 1;
  grid-row: span 1;
  aspect-ratio: 1.35 / 1;
}

/* Sizing templates logic as tiles */
.bookmark-tile.size-medium {
  grid-column: span 1; /* Standard columns spans 1 as seen in screenshot grid */
  grid-row: span 1;
}

.bookmark-tile.size-large {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 1.35 / 1;
}

.bookmark-tile.size-wide {
  grid-column: span 2;
  grid-row: span 1;
  aspect-ratio: 2.7 / 1;
  flex-direction: row !important;
  justify-content: flex-start;
  gap: 12px;
}

.bookmark-tile.size-tall {
  grid-column: span 1;
  grid-row: span 2;
  aspect-ratio: 1.35 / 2;
}

/* Hover effects */
.bookmark-tile:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(148, 163, 184, 0.2);
  border-color: rgba(0, 0, 0, 0.05);
}

/* Brand Colored tiles support */
.bookmark-tile.brand-colored {
  border: none;
}

.bookmark-tile.brand-colored .bookmark-title {
  color: #ffffff !important;
}

.bookmark-tile.brand-colored .bookmark-domain {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Tile Icon Styles - White Squircle Container precisely like screenshot */
.bookmark-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px; /* Perfect squircle radius */
  background: #ffffff; /* Always crisp white background */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); /* Premium soft drop shadow */
  width: calc(46px * var(--content-scale));
  height: calc(46px * var(--content-scale));
  padding: calc(6px * var(--content-scale));
  flex-shrink: 0;
  transition: var(--transition-smooth);
  margin-top: calc(-4px * var(--content-scale)); /* Elevate icon slightly for more text room below */
}

.bookmark-icon-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bookmark-icon-container .icon-emoji {
  font-size: calc(22px * var(--content-scale));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon Sizing Tokens (keep fallbacks) */
.icon-size-xs { width: calc(30px * var(--content-scale)); height: calc(30px * var(--content-scale)); padding: calc(4px * var(--content-scale)); }
.icon-size-xs .icon-emoji { font-size: calc(14px * var(--content-scale)); }

.icon-size-s  { width: calc(38px * var(--content-scale)); height: calc(38px * var(--content-scale)); padding: calc(5px * var(--content-scale)); }
.icon-size-s  .icon-emoji { font-size: calc(18px * var(--content-scale)); }

.icon-size-m  { width: calc(46px * var(--content-scale)); height: calc(46px * var(--content-scale)); padding: calc(6px * var(--content-scale)); }
.icon-size-m  .icon-emoji { font-size: calc(22px * var(--content-scale)); }

.icon-size-l  { width: calc(54px * var(--content-scale)); height: calc(54px * var(--content-scale)); padding: calc(8px * var(--content-scale)); }
.icon-size-l  .icon-emoji { font-size: calc(28px * var(--content-scale)); }

.icon-size-xl { width: calc(62px * var(--content-scale)); height: calc(62px * var(--content-scale)); padding: calc(10px * var(--content-scale)); }
.icon-size-xl .icon-emoji { font-size: calc(34px * var(--content-scale)); }

/* Tile Labels Styles */
.bookmark-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.bookmark-title {
  font-size: var(--tile-font-size); /* Responsive typography */
  font-weight: 700;
  color: #1e293b;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Support up to exactly 2 lines of text */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

.bookmark-domain {
  font-size: var(--tile-domain-size);
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  margin-top: 1px;
}

.bookmark-desc {
  font-size: 0.7rem;
  color: #94a3b8;
  display: none; /* Only show in large sizes */
}

.size-large .bookmark-desc {
  display: block;
}

/* Edit indicator */
.bookmark-edit-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition-fast);
  z-index: 5;
}

.bookmark-tile:hover .bookmark-edit-badge {
  opacity: 1;
}

.bookmark-edit-badge:hover {
  background: #1e293b;
  color: white;
}

.bookmark-edit-badge svg {
  width: 10px;
  height: 10px;
}

/* Custom Add Button Style */
.bookmark-tile.tile-adder {
  background: rgba(255, 255, 255, 0.3);
  border: 1px dashed rgba(148, 163, 184, 0.5);
  color: #64748b;
}

.bookmark-tile.tile-adder:hover {
  background: #ffffff;
  border-color: #1d4ed8;
  color: #1e293b;
}

.adder-icon {
  width: 20px;
  height: 20px;
  color: #94a3b8;
  margin-top: 4px;
}

/* Drag State stylings */
.bookmark-tile.dragging {
  opacity: 0.3;
  transform: scale(0.95);
}

.bookmark-tile.drag-over {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

/* Footer & Settings Trigger */
.app-footer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}

.settings-trigger-btn {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  color: #64748b;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.12);
  transition: var(--transition-smooth);
}

.settings-trigger-btn:hover {
  transform: rotate(45deg);
  color: #1e293b;
}

.settings-trigger-btn svg {
  width: 16px;
  height: 16px;
}

/* Modals & Overlay system */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
}

.modal-card-large {
  max-width: 720px;
  height: 80vh;
  max-height: 520px;
}

.modal-header {
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
}

.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
}

.modal-close-btn svg {
  width: 18px;
  height: 18px;
}

.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
}

.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
}

/* Input Fields styling */
.form-group {
  margin-bottom: 1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.form-group input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-family: var(--font-main);
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition-fast);
}

.form-group input[type="text"]:focus {
  border-color: #3b82f6;
  background: #ffffff;
}

/* Selectors button list */
.size-selector {
  display: flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
}

.btn-size-choice {
  flex-grow: 1;
  background: none;
  border: none;
  outline: none;
  padding: 0.4rem 0;
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  transition: var(--transition-fast);
}

.btn-size-choice.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(148, 163, 184, 0.15);
}

/* Custom Palette Swatches */
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}

.color-swatch.active {
  border-color: #3b82f6;
  transform: scale(1.1);
}

.custom-color-wrapper {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  background-image: conic-gradient(red, yellow, green, cyan, blue, magenta, red);
  overflow: hidden;
}

.custom-color-wrapper input[type="color"] {
  position: absolute;
  opacity: 0;
}

/* System Action Buttons */
.btn-primary {
  background: #1e293b;
  color: #ffffff;
  border: none;
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover {
  background: #0f172a;
}

.btn-secondary {
  background: #f1f5f9;
  color: #ef4444;
  border: 1px solid #e2e8f0;
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #ef4444;
  color: #ffffff;
}

.btn-text {
  background: none;
  border: none;
  padding: 0.55rem 1rem;
  color: #64748b;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

/* Settings Panel side navigation layout */
.settings-layout {
  display: flex;
}

.settings-sidebar {
  width: 180px;
  border-right: 1px solid #f1f5f9;
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-item {
  background: none;
  border: none;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  color: #64748b;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.sidebar-item.active {
  color: #0f172a;
  background: #f1f5f9;
}

.settings-content {
  flex-grow: 1;
  padding-left: 1.25rem;
}

.settings-page {
  display: none;
}

.settings-page.active {
  display: block;
}

.settings-page h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.settings-group {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 2px 12px;
  margin-bottom: 1rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.settings-row:last-child {
  border-bottom: none;
}

.setting-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
}

.setting-desc {
  font-size: 0.7rem;
  color: #64748b;
}

/* Toggle Switch slider */
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

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

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

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

input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(16px); }

/* Wallpapers list */
.wallpapers-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.wallpaper-item {
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  cursor: pointer;
}

.wallpaper-item.active {
  border: 2px solid #3b82f6;
}

/* Custom URL background apply */
.custom-url-wrapper {
  display: flex;
  gap: 6px;
}

/* Workspace management edit table rows */
.workspace-manager-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workspace-manager-row {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 6px 12px;
  gap: 8px;
}

.workspace-drag-handle { color: #94a3b8; cursor: grab; }
.workspace-drag-handle svg { width: 14px; height: 14px; }
.workspace-manager-input {
  flex-grow: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
}

.workspace-manager-delete {
  background: none;
  border: none;
  color: #ff3366;
  cursor: pointer;
}

.workspace-manager-delete svg { width: 14px; height: 14px; }

.workspace-manager-row.dragging {
  opacity: 0.4;
  border-style: dashed;
  background: rgba(0, 0, 0, 0.02);
}

.workspace-manager-row.drag-over {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(1px);
}


/* ==========================================================================
   Compact layer (phones and small tablets)

   Desktop keeps absolute tile coordinates (gridColumnStart/RowStart written by
   app.js). Below 1024px those coordinates are meaningless: a tile at column 9
   on a 3-column grid spawns implicit tracks and the grid falls apart. The
   compact layer switches the grid to document flow and neutralises the inline
   coordinates with !important, which beats an inline style.
   ========================================================================== */

.fab-add { display: none; }

@media (max-width: 1023px) {
  :root {
    --tile-scale: 1 !important;   /* desktop tile scaling does not apply here */
    --grid-gap: 10px;
    --m-tile-row: 96px;
    --m-radius: 16px;
    --m-pad-x: 12px;
  }

  html, body { overflow-x: hidden; }

  .app-container {
    max-width: 100%;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-right: calc(var(--m-pad-x) + env(safe-area-inset-right));
    padding-left: calc(var(--m-pad-x) + env(safe-area-inset-left));
    padding-bottom: calc(88px + env(safe-area-inset-bottom)); /* clears the FAB */
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* --- Bookmarks grid: flow instead of absolute placement --- */
  .bookmarks-grid {
    grid-template-rows: none !important;
    grid-auto-rows: var(--m-tile-row);
    grid-auto-flow: row dense;
    justify-content: stretch;
    min-height: auto;
    padding: 0;
    gap: var(--grid-gap);
  }

  .bookmarks-grid > .bookmark-tile {
    grid-column-start: auto !important;
    grid-row-start: auto !important;
  }

  .grid-cell-placeholder { display: none !important; }
  .bookmark-tile.tile-adder { display: none !important; }

  .bookmark-tile {
    aspect-ratio: auto !important;
    height: 100%;
    min-width: 0;
    padding: 8px 6px;
    gap: 6px;
    border-radius: var(--m-radius);
    justify-content: center;
  }

  .bookmark-tile.size-medium,
  .bookmark-tile.size-small { grid-column: span 1; grid-row: span 1; }
  .bookmark-tile.size-tall  { grid-column: span 1; grid-row: span 2; }
  .bookmark-tile.size-large { grid-column: span 2; grid-row: span 2; }
  .bookmark-tile.size-wide {
    grid-column: span 2;
    grid-row: span 1;
    flex-direction: row !important;
    justify-content: flex-start;
    padding-left: 12px;
    gap: 10px;
  }

  .bookmark-tile:hover { transform: none; }   /* hover sticks on touch */
  .bookmark-tile:active { transform: scale(0.96); }

  .bookmark-icon-container {
    width: 40px !important;
    height: 40px !important;
    padding: 5px !important;
    margin-top: 0;
    border-radius: 10px;
  }
  .bookmark-icon-container .icon-emoji { font-size: 22px !important; }

  .size-large .bookmark-icon-container,
  .size-tall .bookmark-icon-container { width: 52px !important; height: 52px !important; }
  .size-large .bookmark-icon-container .icon-emoji,
  .size-tall .bookmark-icon-container .icon-emoji { font-size: 28px !important; }

  .bookmark-title {
    font-size: 11.5px !important;
    line-height: 1.2;
    -webkit-line-clamp: 2;
  }
  .bookmark-domain { display: none; }
  .size-large .bookmark-domain,
  .size-wide .bookmark-domain { display: block; font-size: 10px !important; }
  .bookmark-desc { display: none !important; }
  .size-large .bookmark-desc { display: block !important; font-size: 10px; }

  .size-wide .bookmark-info { align-items: flex-start; text-align: left; }
  .size-wide .bookmark-title { -webkit-line-clamp: 1; font-size: 13px !important; }

  /* Edit badge is hover-only on desktop and therefore unreachable by touch. */
  .bookmark-edit-badge {
    opacity: 0.85;
    width: 26px;
    height: 26px;
    top: 2px;
    right: 2px;
  }
  .bookmark-edit-badge::after {
    content: "";                                  /* 44x44 touch area */
    position: absolute;
    top: -9px; right: -9px; bottom: -9px; left: -9px;
  }
  .bookmark-edit-badge svg { width: 12px; height: 12px; }

  /* --- Workspace tabs: edge-to-edge horizontal scroll --- */
  .workspaces-nav {
    justify-content: flex-start;
    margin-bottom: 14px;
    margin-left: calc(-1 * (var(--m-pad-x) + env(safe-area-inset-left)));
    margin-right: calc(-1 * (var(--m-pad-x) + env(safe-area-inset-right)));
    overflow: hidden;
  }
  .workspaces-tabs {
    gap: 8px;
    padding: 2px calc(var(--m-pad-x) + env(safe-area-inset-left));
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .workspaces-tabs::-webkit-scrollbar { display: none; }

  .workspace-tab {
    font-size: 0.95rem !important;
    padding: 0 16px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.8);
  }
  .workspace-tab.active { background: #ffffff; border-color: #0f172a; }

  /* --- Floating action buttons --- */
  .app-footer {
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column-reverse;   /* "+" lowest, gear above it */
    align-items: center;
    gap: 10px;
  }
  .fab-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    border: none;
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .fab-add svg { width: 26px; height: 26px; }
  .fab-add:active { transform: scale(0.94); }

  .settings-trigger-btn { width: 44px; height: 44px; }
  .settings-trigger-btn svg { width: 20px; height: 20px; }
  .settings-trigger-btn:hover { transform: none; }
}

/* Column counts per width. 390px: 3 tracks of 115px. 360px: 3 of 105px. */
@media (max-width: 400px) {
  .bookmarks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 401px) and (max-width: 539px) {
  .bookmarks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 540px) and (max-width: 767px) {
  .bookmarks-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bookmarks-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    --m-tile-row: 108px;
  }
}

/* --- Header: logo left, clock right, one row --- */
@media (max-width: 767px) {
  .app-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: auto;
    margin-bottom: 14px;
    gap: 10px;
  }
  .brand-logo-container {
    position: static;
    top: auto;
    margin-bottom: 0;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
  }
  .brand-logo-emoji { font-size: 1.5rem; }
  .brand-name { font-size: 1.25rem; letter-spacing: -0.01em; }
  .brand-subtitle { display: none; }
  .brand-logo-img { width: 28px; height: 28px; }

  .clock-widget { align-items: flex-end; flex-shrink: 0; }
  .clock-time { font-size: 1.75rem; font-weight: 600; }
  .clock-date { font-size: 0.6rem; letter-spacing: 0.04em; margin-top: 1px; }

  /* --- Search --- */
  .search-container { margin-bottom: 12px; }
  .search-wrapper {
    max-width: 100%;
    height: 46px;
    padding: 0 16px;
    border-radius: 23px;
  }
  #search-input {
    font-size: 16px !important;   /* below 16px iOS Safari zooms on focus */
    padding: 0;
    text-align: left;
  }
  .search-icon { width: 20px; height: 20px; }
  .search-clear-btn { width: 32px; height: 32px; margin-left: 2px; }
}

@media (max-width: 360px) {
  .clock-date { display: none; }
  .brand-name { font-size: 1.1rem; }
}

/* Phone in landscape: height is the scarce axis. */
@media (max-width: 1023px) and (max-height: 480px) {
  .app-header { margin-bottom: 8px; }
  .clock-time { font-size: 1.25rem; }
  .clock-date { display: none; }
  .search-container, .workspaces-nav { margin-bottom: 10px; }
}
@media (max-width: 1023px) and (max-height: 480px) and (orientation: landscape) {
  .bookmarks-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    --m-tile-row: 84px;
  }
}

/* --- Modals become bottom sheets --- */
@media (max-width: 767px) {
  .modal-overlay { align-items: flex-end; padding: 0; }

  .modal-card,
  .modal-card-large {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    animation: sheet-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 16px 16px 12px;
    border-radius: 20px 20px 0 0;
  }
  .modal-header::before {
    content: "";                                  /* sheet grabber */
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #e2e8f0;
  }
  .modal-header h3 { font-size: 1.05rem; }
  .modal-close-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -8px -8px -8px 0;
  }

  .modal-body {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
    background: #fff;
  }

  /* Bookmark form */
  .form-grid { grid-template-columns: 1fr; gap: 0; }

  .form-group input[type="text"],
  #bookmark-workspace {
    font-size: 16px !important;
    padding: 12px 14px !important;
    min-height: 48px;
    border-radius: 10px !important;
  }
  .form-group label { font-size: 0.7rem; margin-bottom: 6px; }

  .size-selector { padding: 4px; gap: 4px; }
  .btn-size-choice { min-height: 44px; font-size: 0.85rem; }

  .color-swatch,
  .custom-color-wrapper { width: 34px; height: 34px; }
  .color-palette { gap: 10px; }

  .form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: #fff;
    margin: 0 -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #f1f5f9;
  }
  .form-actions-right { display: flex; gap: 8px; }
  .btn-primary, .btn-secondary, .btn-text {
    min-height: 48px;
    padding: 0 18px;
    font-size: 0.9rem;
  }

  /* Settings sheet */
  .settings-layout { flex-direction: column; padding: 0; }
  .settings-sidebar {
    width: 100%;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 0 0 10px;
    margin: 0 0 12px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
  }
  .settings-sidebar::-webkit-scrollbar { display: none; }
  .sidebar-item {
    white-space: nowrap;
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    background: #f8fafc;
  }
  .settings-content { padding-left: 0; }

  .settings-row { flex-wrap: wrap; gap: 8px; }
  .settings-info { flex: 1 1 200px; min-width: 0; }
  .switch { width: 44px; height: 26px; flex-shrink: 0; }
  .slider:before { height: 20px; width: 20px; }
  input:checked + .slider:before { transform: translateX(18px); }

  .wallpapers-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .custom-url-wrapper { flex-direction: column; gap: 8px; }
  .custom-url-wrapper .btn-primary { width: 100%; }
  .backup-actions .btn-primary,
  .backup-actions .btn-secondary {
    flex: 1 1 100%;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  /* Preset rows carry inline styles in index.html, hence !important. */
  #global-size-selector, #content-scale-selector,
  #logo-scale-selector, #clock-scale-selector,
  #search-scale-selector, #tabs-scale-selector {
    flex-wrap: wrap !important;
    width: 100%;
  }
  #global-size-selector button, #content-scale-selector button,
  #logo-scale-selector button, #clock-scale-selector button,
  #search-scale-selector button, #tabs-scale-selector button {
    min-height: 40px;
    flex: 1 1 auto;
  }
  #global-scale-slider { width: 100% !important; height: 24px !important; }
  #grid-cols-dec, #grid-cols-inc, #grid-rows-dec, #grid-rows-inc {
    width: 40px !important;
    height: 40px !important;
  }

  /* The grid/tile-size settings only affect the desktop layout. */
  .settings-mobile-note { display: block; }
}

.settings-mobile-note { display: none; }