/* ============================================================
   3D Artist PDF Toolkit – Basic Tier · styles.css
   Studio-dark aesthetic with amber/indigo accent palette
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg: #0a0a12;
  --bg-2: #12121e;
  --bg-3: #1a1a2c;
  --bg-4: #232338;
  --border: #2a2a42;
  --border-light: #353558;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-dim: rgba(245,158,11,0.12);
  --purple: #8b5cf6;
  --purple-dim: rgba(139,92,246,0.12);
  --text: #e8e8f4;
  --text-2: #a0a0c0;
  --text-3: #606080;
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --header-h: 56px;
  --footer-h: 36px;
  --sidebar-w: 220px;
  --right-w: 260px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --font-body: 'Segoe UI', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-display: 'Segoe UI Semibold', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

[data-theme="light"] {
  --bg: #f4f4f8;
  --bg-2: #ffffff;
  --bg-3: #f0f0f6;
  --bg-4: #e8e8f0;
  --border: #dddde8;
  --border-light: #e8e8f0;
  --text: #1a1a2c;
  --text-2: #5a5a78;
  --text-3: #9090a8;
  --shadow: 0 4px 24px rgba(0,0,0,0.1);
  --accent-dim: rgba(245,158,11,0.1);
  --purple-dim: rgba(139,92,246,0.1);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; font-size: 15px; }
body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea {
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  width: 100%;
  transition: border-color var(--transition), background var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-4);
}
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0c0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
textarea { resize: vertical; min-height: 72px; }
a { color: var(--accent); text-decoration: none; }

/* ── App Shell ──────────────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;        /* fallback for older browsers */
  height: 100dvh;       /* BUG 1 FIX: dynamic viewport height — Android Chrome URL bar safe */
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────── */
.app-header {
  height: var(--header-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-logo-icon { flex-shrink: 0; }
.header-app-name { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; letter-spacing: -0.3px; display: block; line-height: 1.1; background: linear-gradient(135deg, var(--accent), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.header-project-name { font-size: 0.7rem; color: var(--text-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.header-center { flex: 1; display: flex; justify-content: center; }
.header-right { display: flex; align-items: center; gap: 8px; }

.offline-badge { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--success); background: rgba(16,185,129,0.1); padding: 3px 8px; border-radius: 99px; border: 1px solid rgba(16,185,129,0.2); }
.offline-badge svg { color: var(--success); }

.autosave-badge { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--success); animation: fadeIn 0.3s ease; }
.autosave-dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }

.sidebar-toggle { padding: 6px; color: var(--text-2); border-radius: var(--radius-sm); transition: background var(--transition), color var(--transition); }
.sidebar-toggle:hover { background: var(--bg-3); color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: var(--accent); color: #000; font-weight: 700; font-size: 0.85rem; border-radius: var(--radius-sm); transition: all var(--transition); letter-spacing: 0.2px; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245,158,11,0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; background: var(--bg-3); color: var(--text); font-size: 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--border); transition: all var(--transition); }
.btn-secondary:hover { background: var(--bg-4); border-color: var(--border-light); }
.btn-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; color: var(--text-2); font-size: 0.85rem; border-radius: var(--radius-sm); transition: all var(--transition); }
.btn-ghost:hover { background: var(--bg-3); color: var(--text); }
.btn-danger { background: var(--error); color: white; padding: 9px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; transition: all var(--transition); }
.btn-danger:hover { opacity: 0.9; }
.btn-danger-ghost { color: var(--error); }
.btn-danger-ghost:hover { background: rgba(239,68,68,0.1); }
.btn-icon { padding: 7px; color: var(--text-2); border-radius: var(--radius-sm); transition: all var(--transition); }
.btn-icon:hover { background: var(--bg-3); color: var(--text); }
.btn-accent { background: linear-gradient(135deg, var(--accent), #e08900); color: #000; font-weight: 700; padding: 7px 16px; border-radius: var(--radius-sm); font-size: 0.82rem; letter-spacing: 0.2px; transition: all var(--transition); display: inline-flex; align-items: center; gap: 6px; }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245,158,11,0.35); }
.btn-sm { padding: 5px 10px !important; font-size: 0.78rem !important; }
.btn-block { width: 100%; justify-content: center; }

/* ── Body Layout ─────────────────────────────────────────────── */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: transform var(--transition), width var(--transition);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar.collapsed { width: 0; overflow: hidden; }
.sidebar-nav { padding: 12px 8px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 0.85rem; transition: all var(--transition); width: 100%; text-align: left; position: relative; white-space: nowrap; }
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.nav-item.active svg { color: var(--accent); }
.nav-divider { height: 1px; background: var(--border); margin: 8px 12px; }
.nav-badge { margin-left: auto; background: var(--purple); color: white; font-size: 0.65rem; padding: 1px 6px; border-radius: 99px; font-weight: 700; }
.sidebar-bottom { padding: 12px; border-top: 1px solid var(--border); }
.tier-badge { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--accent); font-weight: 700; margin-bottom: 12px; letter-spacing: 0.5px; }
.pro-teaser { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.pro-teaser-title { font-size: 0.72rem; color: var(--text-3); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.pro-teaser-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pro-teaser-list li { font-size: 0.75rem; color: var(--text-3); padding: 2px 0; }

/* ── Main Content ────────────────────────────────────────────── */
.main-content {
  flex: 1;
  margin-right: var(--right-w);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.view { display: none; animation: fadeIn 0.2s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.view-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.view-header h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.5px; }
.view-sub { font-size: 0.82rem; color: var(--text-2); margin-top: 2px; }
.view-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Cards ──────────────────────────────────────────────────── */
.card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.card-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 14px; letter-spacing: -0.2px; }
.form-card { margin-bottom: 14px; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 12px; }
.form-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-input, .form-select, .form-textarea { width: 100%; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* ── Dashboard ──────────────────────────────────────────────── */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 28px; }
.dash-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: all var(--transition); }
.dash-card.clickable { cursor: pointer; }
.dash-card.clickable:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245,158,11,0.15); }
.dash-card-icon { width: 56px; height: 56px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.checklist-icon { background: var(--accent-dim); color: var(--accent); }
.doc-icon { background: var(--purple-dim); color: var(--purple); }
.dash-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.dash-card p { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.dash-card-action { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.recent-section { margin-bottom: 24px; }
.section-title { font-size: 0.85rem; font-weight: 700; color: var(--text-2); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; }
.recent-list { display: flex; flex-direction: column; gap: 8px; }
.recent-item { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all var(--transition); }
.recent-item:hover { border-color: var(--accent); background: var(--bg-3); }
.recent-item-icon { font-size: 1.2rem; }
.recent-item-info { flex: 1; min-width: 0; }
.recent-item-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-item-meta { font-size: 0.72rem; color: var(--text-3); }
.recent-item-type { font-size: 0.7rem; background: var(--bg-3); color: var(--text-2); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); }
.privacy-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.privacy-row span { font-size: 0.78rem; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 99px; }

/* ── Checklist ──────────────────────────────────────────────── */
.template-selector { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; animation: fadeIn 0.2s ease; }
.template-selector-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.template-selector-header h4 { font-size: 0.9rem; font-weight: 700; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.template-card { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; transition: all var(--transition); text-align: left; }
.template-card:hover { border-color: var(--accent); background: var(--accent-dim); }
.template-card-icon { font-size: 1.4rem; margin-bottom: 6px; }
.template-card-name { font-size: 0.82rem; font-weight: 600; margin-bottom: 4px; }
.template-card-count { font-size: 0.72rem; color: var(--text-3); }
/* ── Fieldset reset (used for checklist-meta accessibility) ──── */
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
fieldset legend { display: none; }

.checklist-meta { }
.progress-bar-wrap { padding: 14px 18px; }
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.progress-label { font-size: 0.82rem; font-weight: 600; }
.progress-pct { font-size: 1.1rem; font-weight: 800; color: var(--accent); }
.progress-bar { height: 8px; background: var(--bg-3); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #f59e0b88); border-radius: 99px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.progress-stats { font-size: 0.75rem; color: var(--text-3); margin-top: 6px; }
.checklist-container { }
.task-group { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.task-group-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-3); }
.task-group-title { font-size: 0.85rem; font-weight: 700; flex: 1; }
.task-group-count { font-size: 0.72rem; color: var(--text-3); background: var(--bg-4); padding: 2px 8px; border-radius: 99px; }
.task-group-actions { display: flex; gap: 4px; }
.task-list { padding: 8px; }
.task-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); transition: background var(--transition); cursor: grab; border: 1px solid transparent; margin-bottom: 4px; }
.task-item:hover { background: var(--bg-3); }
.task-item.dragging { opacity: 0.5; border: 1px dashed var(--accent); background: var(--accent-dim); }
.task-item.drag-over { border-top: 2px solid var(--accent); }
.task-drag-handle { color: var(--text-3); cursor: grab; padding: 2px; flex-shrink: 0; }
.task-checkbox { width: 18px; height: 18px; border: 2px solid var(--border-light); border-radius: 4px; cursor: pointer; flex-shrink: 0; appearance: none; transition: all var(--transition); background: var(--bg-3); }
.task-checkbox:checked { background: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.task-text { flex: 1; font-size: 0.85rem; }
.task-item.completed .task-text { text-decoration: line-through; color: var(--text-3); }
.task-priority { font-size: 0.68rem; padding: 2px 6px; border-radius: 99px; font-weight: 600; flex-shrink: 0; }
.priority-high { background: rgba(239,68,68,0.15); color: #ef4444; }
.priority-medium { background: rgba(245,158,11,0.15); color: #f59e0b; }
.priority-low { background: rgba(16,185,129,0.15); color: #10b981; }
.task-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition); }
.task-item:hover .task-actions,
.task-item:focus-within .task-actions { opacity: 1; } /* Fix #8: show on focus too */
.task-move-btn { color: var(--text-3); }  /* Fix #8: subtle move buttons */
.task-action-btn { padding: 3px 6px; color: var(--text-3); border-radius: 4px; font-size: 0.75rem; transition: all var(--transition); }
.task-action-btn:hover { background: var(--bg-4); color: var(--text); }
.task-action-btn:disabled, .task-action-btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }
/* Fix #30: visible focus ring for contenteditable in all browsers including Firefox */
.task-text:focus, .task-text:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.add-task-row { padding: 8px; border-top: 1px solid var(--border); display: flex; gap: 6px; }
.add-task-input { flex: 1; padding: 6px 10px; font-size: 0.82rem; }

/* ── Documentation ──────────────────────────────────────────── */
.doc-form { }
.asset-list { display: flex; flex-direction: column; gap: 6px; }
.asset-item { display: flex; align-items: center; gap: 8px; }
.asset-item input { flex: 1; font-size: 0.82rem; padding: 6px 10px; }
.asset-item-remove { color: var(--error); padding: 4px 8px; border-radius: 4px; transition: background var(--transition); flex-shrink: 0; font-size: 1rem; }
.asset-item-remove:hover { background: rgba(239,68,68,0.1); }
.image-drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 32px 20px; text-align: center; cursor: pointer; transition: all var(--transition); margin-bottom: 12px; }
.image-drop-zone:hover, .image-drop-zone.drag-active { border-color: var(--accent); background: var(--accent-dim); }
.image-drop-zone p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; margin-top: 10px; }
.drop-sub { font-size: 0.75rem; color: var(--text-3); }
.image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 4px; }
.image-preview-item { position: relative; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.image-preview-item img { width: 100%; height: 100px; object-fit: cover; display: block; }
.image-preview-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity var(--transition); }
.image-preview-item:hover .image-preview-actions,
.image-preview-item:focus-within .image-preview-actions { opacity: 1; }
/* Fix #32: always visible on touch */
@media (hover: none) {
  .image-preview-actions { opacity: 1; }
  .task-actions { opacity: 1; }
}
.img-action-btn { background: rgba(0,0,0,0.7); color: white; border-radius: 4px; padding: 3px 6px; font-size: 0.72rem; transition: background var(--transition); }
.img-action-btn:hover { background: rgba(0,0,0,0.9); }
.image-caption { padding: 6px 8px; font-size: 0.72rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--bg-4); border-top: 1px solid var(--border); cursor: pointer; }
.image-caption:hover { color: var(--accent); }
.image-order-badge { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,0.7); color: white; border-radius: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }

/* ── Saved Projects ─────────────────────────────────────────── */
.saved-list { display: flex; flex-direction: column; gap: 10px; }
.saved-project-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 14px; transition: all var(--transition); }
.saved-project-card:hover { border-color: var(--border-light); background: var(--bg-3); }
.saved-project-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.saved-project-info { flex: 1; min-width: 0; }
.saved-project-name { font-size: 0.9rem; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-project-meta { font-size: 0.73rem; color: var(--text-3); }
.saved-project-actions { display: flex; gap: 4px; flex-shrink: 0; }
.storage-info { font-size: 0.75rem; color: var(--text-3); margin-top: 16px; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }


/* Fix #23: right panel close button row */
.panel-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-title-row .panel-title { margin-bottom: 0; }
/* ── Right Panel ─────────────────────────────────────────────── */
.right-panel {
  position: fixed;
  top: 56px;
  bottom: 36px;
  right: 0;
  width: var(--right-w);
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}
.right-panel-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  scrollbar-gutter: stable;
}
.panel-title { font-size: 0.9rem; font-weight: 800; margin-bottom: 16px; color: var(--text); letter-spacing: -0.2px; }
.panel-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.panel-section:last-child { border-bottom: none; margin-bottom: 0; }
.panel-section-title { font-size: 0.72rem; font-weight: 700; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.panel-module-info { display: flex; flex-direction: column; gap: 6px; }
.info-item { display: flex; justify-content: space-between; align-items: center; }
.info-label { font-size: 0.75rem; color: var(--text-3); }
.info-value { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.toggle-label { font-size: 0.82rem; color: var(--text-2); }
.toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--bg-4); border-radius: 99px; cursor: pointer; transition: background var(--transition); border: 1px solid var(--border); }
.toggle-slider::after { content: ''; position: absolute; width: 14px; height: 14px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: transform var(--transition); }
.toggle input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-slider::after { transform: translateX(16px); }
.logo-upload-area { background: var(--bg-3); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; cursor: pointer; font-size: 0.78rem; color: var(--text-3); min-height: 60px; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
.logo-upload-area:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.filename-preview { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2); word-break: break-all; }
.panel-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── Footer ─────────────────────────────────────────────────── */
.app-footer {
  height: var(--footer-h);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-3);
}
.footer-version { font-weight: 600; color: var(--text-3); }

/* v2.3.9 — Footer center website link (light blue) */
.footer-center {
  flex: 0 0 auto;
  text-align: center;
}
.footer-link {
  color: #60a5fa;            /* light blue (Tailwind blue-400) */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.footer-link:hover,
.footer-link:focus {
  color: #93c5fd;            /* lighter blue on hover (Tailwind blue-300) */
  text-decoration: underline;
}

/* v2.3.9 — Contact links inside the Help guide */
.guide-contact { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; }
.contact-link {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}
.contact-link:hover,
.contact-link:focus { color: #93c5fd; text-decoration: underline; }

/* On narrow screens, hide the center website link to keep the footer
   readable. The link is still available in the Help guide. */
@media (max-width: 720px) {
  .footer-center { display: none; }
}

/* v2.3.9 — Backup All / Restore All UI */
.backup-hint {
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: var(--text-2);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  margin: 0 0 16px 0;
  line-height: 1.55;
}
.backup-hint code {
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--accent);
}
.restore-summary {
  background: var(--bg-3);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin: 12px 0 16px 0;
  font-size: 0.88rem;
  color: var(--text-2);
}
.restore-summary p { margin: 4px 0; }
.restore-options { display: flex; flex-direction: column; gap: 10px; }
.restore-note {
  margin: 14px 0 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-3);
  line-height: 1.55;
}

/* ── Modals ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-overlay.active { display: flex; animation: fadeIn 0.2s ease; }
.modal-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); max-width: 480px; width: 100%; box-shadow: var(--shadow); animation: slideUp 0.25s cubic-bezier(0.4,0,0.2,1); position: relative; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Mobile modal slide-up animation — defined at top level (NOT inside @media) so Android Chrome parses it */
@keyframes slideUpModal { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close { position: absolute; top: 14px; right: 14px; color: var(--text-3); padding: 6px; border-radius: var(--radius-sm); font-size: 1rem; transition: all var(--transition); }
.modal-close:hover { background: var(--bg-3); color: var(--text); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* Welcome Modal */
.welcome-modal { padding: 36px; text-align: center; max-width: 520px; }
.welcome-logo { margin-bottom: 16px; }
.welcome-title { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.8px; background: linear-gradient(135deg, var(--accent), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 6px; }
.welcome-sub { font-size: 0.82rem; color: var(--text-2); margin-bottom: 24px; }
.welcome-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; text-align: left; }
.welcome-feat { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-2); padding: 8px; background: var(--bg-3); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.feat-icon { font-size: 1rem; flex-shrink: 0; }
.privacy-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 20px; }
.pill { font-size: 0.72rem; color: var(--text-3); background: var(--bg-3); border: 1px solid var(--border); padding: 3px 10px; border-radius: 99px; }
.welcome-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.welcome-note { font-size: 0.73rem; color: var(--text-3); }
.welcome-note kbd { font-family: var(--font-mono); background: var(--bg-3); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-size: 0.7rem; }

/* Confirm Modal */
.confirm-modal { padding: 28px; }
.confirm-modal h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.confirm-modal p { font-size: 0.85rem; color: var(--text-2); }
.export-success { text-align: center; }
.success-icon { font-size: 2.5rem; margin-bottom: 10px; }
.export-tip { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.8rem; color: var(--text-2); margin: 14px 0; text-align: left; }
.export-tip strong { color: var(--accent); }

/* Guide Modal */
.guide-modal { padding: 28px; max-width: 580px; max-height: 82vh; overflow-y: auto; }
.guide-modal h2 { font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; }
.guide-sections { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.guide-section { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.guide-section h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 6px; }
.guide-section p { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
.guide-section code { font-family: var(--font-mono); background: var(--bg-4); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; font-size: 0.78rem; color: var(--accent); }
.shortcuts { display: flex; flex-direction: column; gap: 6px; }
.shortcuts div { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-2); }
.shortcuts kbd { font-family: var(--font-mono); background: var(--bg-4); border: 1px solid var(--border); padding: 2px 7px; border-radius: 4px; font-size: 0.72rem; color: var(--text); }

/* ── Toasts ──────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 80px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.83rem; max-width: 300px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; animation: toastIn 0.3s cubic-bezier(0.4,0,0.2,1); pointer-events: auto; }
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--error); }
.toast.warning { border-color: var(--warning); }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.toast.removing { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(30px); opacity: 0; } }

/* ── Mobile Bottom Nav ────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  height: 60px;
  justify-content: space-around;
  align-items: center;
  z-index: 200;
}
.mob-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; color: var(--text-3); font-size: 0.62rem; border-radius: var(--radius-sm); transition: color var(--transition); }
.mob-nav-item.active { color: var(--accent); }
.mob-nav-item svg { margin-bottom: 1px; }

.panel-fab { display: none; position: fixed; bottom: 70px; right: 16px; width: 44px; height: 44px; background: var(--accent); color: #000; border-radius: 50%; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(245,158,11,0.4); z-index: 199; transition: all var(--transition); }
.panel-fab:hover { transform: scale(1.05); }
.panel-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 198; }

/* ── Empty States ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-state p { font-size: 0.85rem; color: var(--text-3); max-width: 300px; line-height: 1.6; }

/* ── Scrollbars ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Export Choice Modal */
.export-choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.export-choice-btn { padding: 14px; text-align: left; border-radius: var(--radius-sm); cursor: pointer; line-height: 1.5; }
.export-choice-btn strong { font-size: 0.88rem; display: block; margin-bottom: 4px; }
.export-choice-btn span { font-size: 0.75rem; opacity: 0.8; }
@media (max-width: 480px) { .export-choice-options { grid-template-columns: 1fr; } }

/* Empty assets */
.empty-assets-msg { font-size: 0.78rem; color: var(--text-3); padding: 4px 0; }


@media (max-width: 1100px) {
  :root { --right-w: 230px; --sidebar-w: 200px; }
}

/* ── Tablet: 900px ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Cancel desktop margin-right reservation — drawer overlays, doesn't take space */
  .main-content { margin-right: 0; }
  /* Right panel slides in from the right as a drawer */
  .right-panel {
    position: fixed;
    right: 0;
    top: var(--header-h);
    bottom: 0;
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: 190;
    border-radius: var(--radius) 0 0 var(--radius);
    width: var(--right-w);
  }
  .right-panel.open { transform: translateX(0); }
  .panel-overlay { display: none; }
  .panel-overlay.active { display: block; z-index: 189; }
  /* BUG 4 partial: show FAB on tablet */
  .panel-fab { display: flex; }
}

/* ── Phone: 640px ────────────────────────────────────────────── */
/* BUG 8 FIX: export-choice and other 480px rules moved here */
@media (max-width: 640px) {
  /* ── BODY/HTML base ── */
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

  /* Drawer behavior — cancel desktop margin reservation again as defense */
  .main-content { margin-right: 0; }

  /* BUG 20: app-shell must fill dynamic viewport */
  .app-shell { height: 100vh; height: 100dvh; }

  /* ── HEADER ── */
  .app-footer { display: none; }
  .sidebar    { display: none; }

  /* BUG 10: hide offline badge — saves ~80px on cramped header */
  .offline-badge { display: none; }

  /* BUG 11: hide autosave badge center — irrelevant on mobile */
  .header-center { display: none; }

  /* BUG 14: hide Download PDF header button — bottom nav has it */
  .header-export-btn { display: none; }

  .app-header { padding: 0 10px; gap: 6px; }
  .header-left { gap: 8px; }
  .header-logo-icon { width: 26px; height: 26px; }
  .header-project-name { display: none; }
  .header-app-name { font-size: 0.76rem; max-width: 150px; }
  .header-right { gap: 6px; }

  /* ── MOBILE BOTTOM NAV ── */
  /* BUG 3 FIX: proper height + safe area so content never hides behind it */
  .mobile-bottom-nav {
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
  }
  .mob-nav-item {
    min-height: 44px;
    min-width: 44px;
    flex: 1;
    gap: 2px;
    padding: 6px 4px;
    font-size: 0.6rem;
  }

  /* ── MAIN CONTENT ── */
  /* BUG 2 FIX: bottom padding clears bottom nav + safe area */
  .main-content {
    padding: 14px 12px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    min-width: 0;
    width: 100%;
  }

  /* BUG 8 FIX: view header stacks vertically on mobile */
  .view-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .view-header h2 { font-size: 1.2rem; }
  .view-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .view-header-actions > button {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }

  /* ── DASHBOARD ── */
  .dashboard-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
  .dash-card { padding: 18px; }
  .dash-card-icon { width: 44px; height: 44px; margin-bottom: 12px; }
  .dash-card h3 { font-size: 0.95rem; }
  .privacy-row { gap: 6px; }
  .privacy-row span { font-size: 0.72rem; }

  /* ── FORMS ── */
  .form-row { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 14px; }

  /* ── TOUCH TARGETS ── */
  .btn-primary, .btn-secondary, .btn-ghost, .btn-accent { min-height: 44px; }
  /* BUG 16 FIX: task action buttons need larger tap targets */
  .task-action-btn { padding: 6px 10px; min-height: 32px; min-width: 32px; font-size: 0.78rem; }
  .task-checkbox { width: 22px; height: 22px; flex-shrink: 0; }

  /* BUG 16 FIX: ensure task actions always visible on touch; give them room */
  .task-actions { opacity: 1; gap: 4px; }
  /* BUG 7 FIX: task items must not overflow on 360px */
  .task-item {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 8px;
  }
  .task-text { min-width: 0; word-break: break-word; overflow-wrap: anywhere; flex: 1 1 120px; }
  .task-drag-handle { display: none; } /* hide on touch — move buttons replace it */
  .task-priority { flex-shrink: 0; font-size: 0.65rem; }

  /* 16px inputs prevent iOS/Android zoom on focus */
  input, select, textarea { min-height: 44px; font-size: 16px !important; }

  /* ── CHECKLIST ── */
  /* BUG 6 FIX: template grid 2 columns on phone */
  .template-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .template-card { padding: 10px; }
  .template-card-icon { font-size: 1.1rem; margin-bottom: 4px; }
  .template-card-name { font-size: 0.78rem; }
  .template-card-count { font-size: 0.68rem; }

  /* ── DOCUMENTATION ── */
  /* BUG 17 FIX: drop zone not too tall on mobile */
  .image-drop-zone { padding: 20px 16px; }
  .image-preview-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .image-preview-item img { height: 80px; }
  .img-action-btn { padding: 5px 7px; font-size: 0.7rem; }

  /* ── SAVED PROJECTS ── */
  /* BUG 13 FIX: saved project cards wrap on small screens */
  .saved-project-card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }
  .saved-project-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
  }
  .saved-project-actions button { min-height: 36px; min-width: 36px; }
  .saved-project-info { min-width: 0; flex: 1; }

  /* ── MODALS ── */
  /* BUG 19 FIX: modals use dvh and fit keyboard viewport */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal-box {
    margin: 0;
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    animation: slideUpModal 0.25s cubic-bezier(0.4,0,0.2,1);
  }
  /* Keep welcome modal centered, not bottom-sheet */
  #welcomeModal { align-items: center; }
  #welcomeModal .modal-box { border-radius: var(--radius); }

  /* BUG 18 FIX: welcome modal actions full-width buttons */
  .welcome-modal { padding: 22px 16px; }
  .welcome-features { grid-template-columns: 1fr; gap: 6px; }
  .welcome-actions { flex-direction: column; gap: 8px; }
  .welcome-actions > button { width: 100%; justify-content: center; }
  .welcome-title { font-size: 1.3rem; }

  .confirm-modal { padding: 20px 16px; }
  .modal-actions { flex-direction: column; gap: 8px; }
  .modal-actions > button { width: 100%; justify-content: center; }

  /* BUG 12 FIX: guide modal uses dvh */
  .guide-modal { padding: 16px; max-height: 85vh; max-height: 85dvh; }

  /* Export choice stacks on mobile */
  .export-choice-options { grid-template-columns: 1fr; }

  /* ── RIGHT PANEL as bottom sheet ── */
  /* BUG 5 FIX: add transition and slide-from-bottom on mobile */
  .right-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    transform: translateY(100%);
    transition: transform var(--transition);
    border-radius: 18px 18px 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
    overflow-y: auto;
    z-index: 300;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .right-panel.open { transform: translateY(0); }
  .panel-overlay.active { display: block; z-index: 299; }

  /* ── PANEL FAB ── */
  /* BUG 4 FIX: FAB above bottom nav + safe area */
  .panel-fab {
    display: flex;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    z-index: 298;
  }

  /* ── TOASTS ── */
  /* BUG 9 FIX: toasts above bottom nav */
  .toast-container {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    left: 12px;
  }
  .toast { max-width: 100%; font-size: 0.8rem; padding: 10px 14px; }
}

/* ── Small Android: 420px ────────────────────────────────────── */
@media (max-width: 420px) {
  /* BUG 14 FIX: very small header at 420px */
  .header-app-name { font-size: 0.72rem; max-width: 130px; }
  .header-logo-icon { width: 24px; height: 24px; }

  /* Template grid single column at 420px */
  .template-grid { grid-template-columns: 1fr; }

  /* Image grid 2-col on small phones */
  .image-preview-grid { grid-template-columns: repeat(2, 1fr); }

  /* Main content tighter padding */
  .main-content { padding: 10px 10px; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .card { padding: 12px; margin-bottom: 10px; }

  /* Saved project card: icon + info row, actions below */
  .saved-project-icon { width: 34px; height: 34px; font-size: 1rem; }
  .saved-project-name { font-size: 0.85rem; }
}

/* ── Very small Android: 360px ───────────────────────────────── */
/* BUG 15 FIX: 360px breakpoint for Galaxy S, Pixel 5, Moto G */
@media (max-width: 360px) {
  .header-app-name { font-size: 0.68rem; max-width: 110px; }
  .view-header h2 { font-size: 1.05rem; }
  .dash-card { padding: 14px; }
  .btn-sm { padding: 5px 8px !important; font-size: 0.72rem !important; }
  /* Single column image grid on very small screens */
  .image-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .image-preview-item img { height: 70px; }
  /* Task item more compact */
  .task-item { padding: 8px 6px; gap: 4px; }
  .task-action-btn { padding: 5px 7px; }
  /* Welcome modal even more compact */
  .welcome-title { font-size: 1.1rem; }
  .welcome-modal { padding: 16px 12px; }
  /* Mob nav labels very small */
  .mob-nav-item { font-size: 0.55rem; }
}

/* ── Landscape phone ─────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  /* Compact header */
  .app-header { height: 48px; }
  /* Reduce guide modal height */
  .guide-modal { max-height: 80vh; max-height: 80dvh; }
  /* Right panel shorter */
  .right-panel { max-height: 95vh; max-height: 95dvh; }
  /* Bottom nav more compact */
  .mobile-bottom-nav { height: calc(50px + env(safe-area-inset-bottom, 0px)); }
  .mob-nav-item { font-size: 0.55rem; padding: 4px 2px; }
  /* Content padding */
  .main-content { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* Toast above compact nav */
  .toast-container { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  /* FAB above compact nav */
  .panel-fab { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

/* ── hover:none — touch device always-visible actions ────────── */
@media (hover: none) {
  .image-preview-actions { opacity: 1; }
  .task-actions { opacity: 1; }
  /* Make touch targets bigger on touch-only devices */
  .img-action-btn { padding: 6px 8px; }
}

/* ============================================================
   PRINT / PDF STYLES
   ============================================================ */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ── Screen reader only ──────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Skip link ───────────────────────────────────────────────── */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; z-index:9999; }
.skip-link:focus { position:fixed; left:16px; top:16px; width:auto; height:auto; padding:8px 16px; background:var(--accent,#f59e0b); color:#000; font-weight:700; border-radius:6px; text-decoration:none; z-index:9999; outline:none; }

/* ── Form hint ───────────────────────────────────────────────── */
.form-hint { font-size:0.75rem; color:var(--text-3); margin-bottom:8px; line-height:1.4; }

/* ── Empty task placeholder ──────────────────────────────────── */
.task-text[data-empty="true"]:not(:focus)::before {
  content: 'Untitled task';
  color: var(--text-3);
  font-style: italic;
  pointer-events: none;
}

/* ============================================================
   ── TRIAL VERSION STYLES (v2.3.9-trial) ─────────────────────
   Trial banner pill, header upgrade button, upgrade modal,
   trial info modal, dashboard trial card, right panel limits,
   sidebar buy box, footer buy link, locked features, Pro badges,
   locked templates, welcome trial limits.
   Uses existing CSS variables — fully theme-able (dark + light).
   ============================================================ */

/* ── Welcome modal trial bits ─────────────────────────────── */
.trial-pill-tiny {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--accent), #fb923c);
  color: #1a1a2c;
  border-radius: 999px;
  vertical-align: middle;
  text-transform: uppercase;
}
.welcome-trial-limits {
  margin: 14px 0 12px;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
}
.trial-limits-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.trial-limits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.83rem;
  color: var(--text);
}
.trial-limits-list li {
  padding: 3px 0 3px 16px;
  position: relative;
  line-height: 1.4;
}
.trial-limits-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}
.welcome-upgrade-row { margin-top: 10px; margin-bottom: 6px; text-align: center; }
.welcome-upgrade-link {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 0.825rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background var(--transition, 0.15s ease);
}
.welcome-upgrade-link:hover { background: var(--accent-dim, rgba(245,158,11,0.12)); }

/* ── Header trial badge + upgrade button ──────────────────── */
.trial-badge-header {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--accent), #fb923c);
  color: #1a1a2c;
  border-radius: 999px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.header-upgrade-btn {
  background: linear-gradient(135deg, var(--accent), #fb923c);
  color: #1a1a2c;
  border: 0;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(245,158,11,0.3);
  flex-shrink: 0;
}
.header-upgrade-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,158,11,0.45);
}
@media (max-width: 600px) {
  .trial-badge-header { display: none; }
  .header-upgrade-btn { padding: 5px 10px; font-size: 0.72rem; }
}

/* ── Upgrade modal ────────────────────────────────────────── */
.upgrade-modal {
  max-width: 480px;
  text-align: center;
  padding: 32px 28px 24px;
  position: relative;
}
.upgrade-modal .modal-close,
.trial-info-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  color: var(--text-2);
  font-size: 1.1rem;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.upgrade-modal .modal-close:hover,
.trial-info-modal .modal-close:hover {
  background: var(--bg-3);
  color: var(--text);
}
.upgrade-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(139,92,246,0.35);
}
.upgrade-modal h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.upgrade-sub {
  color: var(--text-2);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.upgrade-benefits {
  list-style: none;
  padding: 14px 18px;
  margin: 0 0 22px;
  text-align: left;
  background: var(--bg-3);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.upgrade-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.875rem;
  color: var(--text);
}
.ub-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--success);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex: 0 0 auto;
}
.upgrade-actions {
  display: flex;
  gap: 10px;
  flex-direction: column;
  margin-top: 6px;
}
.upgrade-actions .btn-buy {
  background: linear-gradient(135deg, var(--accent), #fb923c);
  color: #1a1a2c;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(245,158,11,0.35);
}
.upgrade-actions .btn-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245,158,11,0.5);
}
.upgrade-actions .btn-ghost { font-size: 0.85rem; padding: 8px 16px; }
.upgrade-fineprint {
  margin-top: 14px;
  font-size: 0.7rem;
  color: var(--text-3);
}
@media (min-width: 520px) {
  .upgrade-actions { flex-direction: row; justify-content: center; }
  .upgrade-actions .btn-buy { flex: 1 1 auto; }
  .upgrade-actions .btn-ghost { flex: 0 0 auto; }
}

/* ── Trial info modal ─────────────────────────────────────── */
.trial-info-modal {
  max-width: 480px;
  padding: 28px 26px 20px;
  position: relative;
  text-align: left;
}
.trial-info-modal h2 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: var(--text);
}
.trial-info-modal > p {
  color: var(--text-2);
  font-size: 0.875rem;
  margin-bottom: 14px;
}
.trial-info-h {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin: 14px 0 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.trial-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text);
}
.trial-info-list li {
  padding: 4px 0 4px 16px;
  position: relative;
  line-height: 1.4;
}
.trial-info-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}
.trial-info-fineprint {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.45;
}
.trial-info-modal .modal-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Dashboard trial info card ────────────────────────────── */
.trial-info-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  margin-bottom: 22px;
  background: linear-gradient(135deg,
    rgba(245,158,11,0.10) 0%,
    rgba(139,92,246,0.10) 100%);
  border: 1px solid var(--accent);
  border-radius: 12px;
}
[data-theme="light"] .trial-info-card {
  background: linear-gradient(135deg,
    rgba(245,158,11,0.06) 0%,
    rgba(139,92,246,0.06) 100%);
}
.trial-info-card-left { flex: 1 1 320px; min-width: 0; }
.trial-info-card-left h3 {
  margin: 6px 0 6px;
  font-size: 1.1rem;
  color: var(--text);
}
.trial-info-card-left p {
  color: var(--text-2);
  font-size: 0.875rem;
  margin: 0 0 8px;
}
.trial-info-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-2);
}
.trial-info-card-list li {
  padding: 3px 0 3px 16px;
  position: relative;
}
.trial-info-card-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}
.trial-info-card-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}
@media (max-width: 600px) {
  .trial-info-card { padding: 16px 14px; gap: 12px; }
  .trial-info-card-right { width: 100%; min-width: 0; }
}

/* ── Sidebar trial tier badge + buy button ───────────────── */
.tier-badge-trial {
  background: linear-gradient(135deg,
    rgba(245,158,11,0.15),
    rgba(139,92,246,0.15));
  color: var(--accent);
  border-color: var(--accent);
}
.sidebar-buy-btn {
  width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  font-size: 0.825rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), #fb923c);
  color: #1a1a2c;
  border-radius: 8px;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(245,158,11,0.25);
}
.sidebar-buy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245,158,11,0.4);
}

/* ── Right panel: Trial Limits meter ──────────────────────── */
.trial-limits-panel { border-color: var(--accent); }
.trial-limits-panel .panel-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trial-usage-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.trial-usage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-3);
  border-radius: 6px;
  font-size: 0.82rem;
}
.trial-usage-label { color: var(--text-2); }
.trial-usage-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.trial-panel-buy {
  background: linear-gradient(135deg, var(--accent), #fb923c);
  color: #1a1a2c;
  border: 0;
  padding: 8px 14px;
  font-size: 0.825rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.trial-panel-buy:hover { transform: translateY(-1px); }

/* ── Footer Buy link ──────────────────────────────────────── */
.footer-buy-link {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  margin-left: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.footer-buy-link:hover {
  background: var(--accent-dim, rgba(245,158,11,0.12));
}

/* ── Pro badges (locked features) ─────────────────────────── */
.pro-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--purple), #a78bfa);
  color: #fff;
  border-radius: 999px;
  vertical-align: middle;
  text-transform: uppercase;
}
.pro-inline {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.58rem;
  font-weight: 700;
  background: var(--purple-dim, rgba(139,92,246,0.18));
  color: var(--purple);
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.locked-feature,
.logo-upload-area.locked-feature {
  opacity: 0.7;
  cursor: pointer;
  border-style: dashed !important;
  position: relative;
}
.locked-feature:hover {
  opacity: 0.9;
  border-color: var(--purple) !important;
}
.locked-input,
.locked-input:focus,
.locked-input:read-only {
  cursor: not-allowed;
  background: var(--bg-3) !important;
  color: var(--text-3) !important;
  border-style: dashed !important;
}

/* ── Locked template card ─────────────────────────────────── */
.template-card-locked {
  opacity: 0.55;
  cursor: pointer;
  position: relative;
}
.template-card-locked:hover {
  opacity: 0.75;
  border-color: var(--purple) !important;
}
.template-card-locked .template-card-icon { filter: grayscale(0.6); }

/* ── Mobile: trial modals respect viewport ────────────────── */
@media (max-width: 600px) {
  .upgrade-modal,
  .trial-info-modal {
    max-width: 100%;
  }
  .welcome-upgrade-row { margin-top: 8px; }
}