:root {
  --otti-bg-primary: #f5f5f7;
  --otti-bg-secondary: #ffffff;
  --otti-bg-card: #f0f0f5;
  --otti-accent: #7c3aed;
  --otti-accent-hover: #6d28d9;
  --otti-accent-light: rgba(124,58,237,0.15);
  --otti-text-primary: #0f0f17;
  --otti-text-secondary: #6b7280;
  --otti-border: #e5e7eb;
  --otti-success: #10b981;
  --otti-warning: #f59e0b;
  --otti-error: #ef4444;
  --otti-radius: 12px;
  --otti-radius-sm: 8px;
  --otti-shadow: 0 4px 24px rgba(0,0,0,0.1);
  --otti-transition: 0.2s ease;
}

body.otti-dark {
  --otti-bg-primary: #0f0f17;
  --otti-bg-secondary: #1c1c28;
  --otti-bg-card: #242436;
  --otti-text-primary: #ffffff;
  --otti-text-secondary: #a0a0b8;
  --otti-border: #2e2e42;
  --otti-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

body {
  background-color: var(--otti-bg-primary);
  color: var(--otti-text-primary);
}

.otti-panel-left, .otti-panel-right {
  background-color: var(--otti-bg-secondary);
  overflow-y: auto; padding: 16px;
  border-right: 1px solid var(--otti-border);
  touch-action: pan-y; /* Allow smooth vertical scrolling on mobile */
  overscroll-behavior: contain; /* Prevent pull-to-refresh */
}
.otti-panel-right { border-left: 1px solid var(--otti-border); border-right: none; }

.otti-canvas-section {
  position: relative; overflow: hidden;
  background-image: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%);
  background-size: 20px 20px;
  display: flex; flex-direction: column;
}
.otti-canvas-container { 
  flex: 1; position: relative; overflow: hidden; 
  touch-action: none; /* Crucial: Locks screen from scrolling when dragging layers */
}
#otti-canvas { position: absolute; transform-origin: 0 0; }

.otti-canvas-toolbar {
  height: 40px; background-color: var(--otti-bg-card);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  border-bottom: 1px solid var(--otti-border); z-index: 10;
}

.otti-tab-bar { display: flex; gap: 4px; margin-bottom: 16px; }
.otti-tab-bar button {
  width: 40px; height: 40px; border-radius: var(--otti-radius-sm);
  background: var(--otti-bg-card); border: 1px solid var(--otti-border);
  cursor: pointer; color: var(--otti-text-primary);
}
.otti-tab-bar button.active { background: var(--otti-accent); color: white; border-color: var(--otti-accent); }

.otti-tab-panel { padding: 12px 0; }

.otti-mobile-tabs { display: none; }
.otti-drawer { display: none; }
.otti-pwa-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.otti-pwa-modal { background: var(--otti-bg-secondary); padding: 32px; border-radius: 20px; max-width: 340px; width: 100%; text-align: center; }

/* Global Touch Targets & Inputs */
button, select, input[type="file"], .otti-layer-item { min-height: 44px; /* Apple/Google minimum touch target */ }
textarea#otti-text-input { width: 100%; min-height: 80px; padding: 12px; border-radius: var(--otti-radius-sm); border: 1px solid var(--otti-border); background: var(--otti-bg-card); color: var(--otti-text-primary); box-sizing: border-box; resize: vertical; margin-bottom: 12px; font-size: 16px; /* Prevents iOS auto-zoom */ }
select, input[type="number"], input[type="text"] { padding: 8px 12px; border-radius: var(--otti-radius-sm); border: 1px solid var(--otti-border); background: var(--otti-bg-card); color: var(--otti-text-primary); font-size: 16px; }

@media (max-width: 768px) {
  .otti-app { grid-template-columns: 1fr; margin-top: 60px; height: calc(100vh - 120px); /* Leave room for bottom bar */ }
  .otti-panel-left, .otti-panel-right { display: none; }
  .otti-mobile-tabs {
    display: flex; position: fixed; bottom: 0; width: 100%; height: 60px;
    background: var(--otti-bg-secondary); border-top: 1px solid var(--otti-border);
    justify-content: space-evenly; align-items: center; z-index: 1000;
  }
  .otti-mobile-tabs button {
    flex: 1; height: 100%; border: none; background: transparent; color: var(--otti-text-secondary);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 12px; gap: 4px; cursor: pointer;
  }
  .otti-mobile-tabs button.active { color: var(--otti-accent); font-weight: bold; }
  
  .otti-drawer {
    display: block; position: fixed; bottom: 60px; width: 100%;
    background: var(--otti-bg-secondary); border-radius: 24px 24px 0 0;
    max-height: 50vh; overflow-y: auto; z-index: 999; padding: 20px 16px;
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    touch-action: pan-y; overscroll-behavior: contain;
  }
  .otti-drawer.open { transform: translateY(0); }
  
  /* Mobile drag handle indicator */
  .otti-drawer::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; background: var(--otti-border); border-radius: 4px;
  }
}