senangwebs-photobooth 1.0.1 → 2.0.2

package/src/css/swp.css

@@ -1,447 +1,987 @@
 /**
- * SenangWebs Photobooth (SWP) - Styles
- * @version 1.0.0
+ * SenangWebs Photobooth (SWP) - TOAST UI Style
+ * Simple & Clean Image Editor UI
+ * @version 3.0.0
  */
 
-/* Font Awesome */
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
+/* CSS Variables */
+:root {
+  --swp-bg-dark: #1e1e1e;
+  --swp-bg-medium: #2d2d2d;
+  --swp-bg-light: #3d3d3d;
+  --swp-bg-hover: #4a4a4a;
+  --swp-border: #404040;
+  --swp-border-light: #555555;
+  --swp-text: #ffffff;
+  --swp-text-secondary: #b0b0b0;
+  --swp-text-dim: #808080;
+  --swp-accent: #00FF99;
+  --swp-accent-hover: #33ffad;
+  --swp-accent-dim: rgba(0, 255, 153, 0.2);
+  --swp-accent-contrast: #000000;
+  --swp-success: #4ade80;
+  --swp-warning: #fbbf24;
+  --swp-error: #f87171;
+  --swp-canvas-bg: #151515;
+  --swp-header-height: 56px;
+  --swp-menu-height: 80px;
+  --swp-radius: 8px;
+  --swp-radius-sm: 6px;
+  --swp-radius-lg: 12px;
+  --swp-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --swp-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --swp-transition: 0.2s ease;
+}
+
+/* Light Theme */
+.swp-app.swp-theme-light {
+  --swp-bg-dark: #ffffff;
+  --swp-bg-medium: #f8f8f8;
+  --swp-bg-light: #ececec;
+  --swp-bg-hover: #e0e0e0;
+  --swp-border: #d4d4d4;
+  --swp-border-light: #c0c0c0;
+  --swp-text: #1a1a1a;
+  --swp-text-secondary: #666666;
+  --swp-text-dim: #999999;
+  --swp-accent: #2563eb;
+  --swp-accent-hover: #1d4ed8;
+  --swp-accent-dim: rgba(37, 99, 235, 0.15);
+  --swp-canvas-bg: #e8e8e8;
+  --swp-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  --swp-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Reset */
+.swp-app *, .swp-app *::before, .swp-app *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Main Container */
+.swp-app {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  background: var(--swp-bg-dark);
+  color: var(--swp-text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  overflow: hidden;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ==================== HEADER ==================== */
+.swp-header {
+  height: var(--swp-header-height);
+  background: var(--swp-bg-medium);
+  border-bottom: 1px solid var(--swp-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.swp-header-left,
+.swp-header-center,
+.swp-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.swp-header-center {
+  flex: 1;
+  justify-content: center;
+}
+
+.swp-header-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  background: var(--swp-bg-light);
+  color: var(--swp-text);
+  border: 1px solid var(--swp-border);
+  border-radius: var(--swp-radius);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all var(--swp-transition);
+}
+
+.swp-header-btn:hover {
+  background: var(--swp-accent);
+  border-color: var(--swp-accent);
+  color: var(--swp-accent-contrast);
+}
+
+.swp-header-btn ss-icon {
+  font-size: 18px;
+}
+
+/* Download Dropdown */
+.swp-download-dropdown {
+  position: relative;
+}
+
+.swp-download-dropdown .swp-header-btn {
+  gap: 6px;
+}
+
+.swp-dropdown-arrow {
+  font-size: 14px !important;
+  opacity: 0.7;
+  margin-left: 2px;
+}
+
+.swp-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+  background: var(--swp-bg-medium);
+  border: 1px solid var(--swp-border);
+  border-radius: var(--swp-radius);
+  box-shadow: var(--swp-shadow);
+  min-width: 120px;
+  z-index: 200;
+  overflow: hidden;
+  animation: swp-dropdown-fade 0.15s ease;
+}
+
+@keyframes swp-dropdown-fade {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
-/* Container */
-.swp-container {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    max-width: 1200px;
-    box-sizing: border-box;
+.swp-dropdown-menu[hidden] {
+  display: none;
 }
 
-.swp-wrapper {
-    background: #ffffff;
-    overflow: hidden;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+.swp-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 10px 16px;
+  background: transparent;
+  color: var(--swp-text);
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: all var(--swp-transition);
 }
 
-/* Toolbar */
-.swp-toolbar {
-    display: flex;
-    gap: 8px;
-    padding: 8px;
-    background: #f8f9fa;
-    flex-wrap: wrap;
-    justify-content: space-between;
+.swp-dropdown-item:hover {
+  background: var(--swp-accent);
+  color: var(--swp-accent-contrast);
 }
 
-.swp-toolbar-group {
-    display: flex;
-    gap: 0px;
-    align-items: center;
-    border: 1px solid #dee2e6;
-    border-radius: 8px;
-    overflow: hidden;
+.swp-dropdown-item:not(:last-child) {
+  border-bottom: 1px solid var(--swp-border);
 }
 
-.swp-toolbar-group .swp-btn {
-    display: flex;
-    flex-direction: column;
-    gap: 0px;
-    height: 48px;
-    width: 80px;
-    min-width: 48px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0px;
-    border: none;
-    padding: 0px;
+.swp-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--swp-border);
+  margin: 0 8px;
+}
+
+/* Icon Button */
+.swp-icon-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--swp-text-secondary);
+  border: none;
+  border-radius: var(--swp-radius);
+  cursor: pointer;
+  transition: all var(--swp-transition);
 }
 
-.swp-toolbar-group .swp-btn span {
-    font-size: 12px;
+.swp-icon-btn:hover {
+  background: var(--swp-bg-hover);
+  color: var(--swp-text);
 }
 
-.swp-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 0px 12px;
-    border: 1px solid #dee2e6;
-    background: #ffffff;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 14px;
-    color: #495057;
-    transition: all 0.2s ease;
-    font-family: inherit;
-    height: 40px;
+.swp-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
-.swp-btn:hover {
-    background: #e9ecef;
-    border-color: #adb5bd;
+.swp-icon-btn ss-icon {
+  font-size: 20px;
 }
 
-.swp-btn:active {
-    transform: scale(0.98);
+/* ==================== WORKSPACE ==================== */
+.swp-workspace {
+  flex: 1;
+  background: var(--swp-canvas-bg);
+  background-image: 
+    linear-gradient(45deg, #202020 25%, transparent 25%),
+    linear-gradient(-45deg, #202020 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #202020 75%),
+    linear-gradient(-45deg, transparent 75%, #202020 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  overflow: hidden;
+  position: relative;
+}
+
+.swp-theme-light .swp-workspace {
+  background-image: 
+    linear-gradient(45deg, #d0d0d0 25%, transparent 25%),
+    linear-gradient(-45deg, #d0d0d0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #d0d0d0 75%),
+    linear-gradient(-45deg, transparent 75%, #d0d0d0 75%);
 }
 
-.swp-btn-primary {
-    background: #007bff;
-    color: white;
-    border-color: #007bff;
+/* Viewport */
+.swp-viewport {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
 }
 
-.swp-btn-primary:hover {
-    background: #0056b3;
-    border-color: #0056b3;
+.swp-canvas-wrapper {
+  position: relative;
+  box-shadow: var(--swp-shadow);
 }
 
-.swp-btn-icon-only {
-    padding: 0px 12px;
-    justify-content: center;
-    align-items: center;
-    aspect-ratio: 1 / 1;
-    max-width: 40px;
+.swp-display-canvas,
+.swp-overlay-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.swp-icon {
-    font-size: 18px;
+.swp-overlay-canvas {
+  pointer-events: none;
 }
 
-.swp-layout-container {
-    display: flex;
-    flex-grow: 1;
+/* ==================== BOTTOM MENU BAR ==================== */
+.swp-menu-bar {
+  height: var(--swp-menu-height);
+  background: var(--swp-bg-medium);
+  border-top: 1px solid var(--swp-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 16px;
+  flex-shrink: 0;
 }
 
-.swp-control-container {
-    min-width: 348px;
-    background: #f8f9fa;
-    padding: 8px 16px;
+.swp-menu-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 72px;
+  height: 64px;
+  padding: 8px;
+  background: transparent;
+  color: var(--swp-text-secondary);
+  border: none;
+  border-radius: var(--swp-radius);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all var(--swp-transition);
 }
 
-.swp-control-container.hidden {
-    display: block;
+.swp-menu-item:hover {
+  background: var(--swp-bg-hover);
+  color: var(--swp-text);
 }
 
-/* Canvas Container */
-.swp-canvas-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 400px;
-    padding: 8px;
-    border-top: 1px solid #dee2e6;
-    border-right: 1px solid #dee2e6;
-    border-top-right-radius: 8px;
-    flex-grow: 1;
-    min-width: 452px;;
+.swp-menu-item.active {
+  background: var(--swp-accent);
+  color: var(--swp-accent-contrast);
 }
 
-.swp-canvas {
-    max-width: 100%;
-    height: auto;
-    background: white;
+.swp-menu-item ss-icon {
+  font-size: 24px;
 }
 
-/* Adjustments Panel */
-.swp-adjustments-panel,
-.swp-filters-panel,
-.swp-resize-panel {
-    display: none;
+/* ==================== SUBMENU ==================== */
+.swp-submenu {
+  position: absolute;
+  bottom: calc(var(--swp-menu-height) + 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--swp-bg-medium);
+  border: 1px solid var(--swp-border);
+  border-radius: var(--swp-radius-lg);
+  box-shadow: var(--swp-shadow);
+  z-index: 100;
+  animation: swp-fade-up 0.2s ease;
 }
 
-.swp-adjustments-panel.active,
-.swp-filters-panel.active,
-.swp-resize-panel.active {
-    display: block;
+@keyframes swp-fade-up {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
 }
 
-.swp-adjustments-panel h3,
-.swp-filters-panel h3,
-.swp-resize-panel h3 {
-    margin: 0 0 15px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #212529;
+.swp-submenu[hidden] {
+  display: none;
 }
 
-.swp-adjustment {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 15px;
-    width: 100%;
+.swp-submenu-content {
+  padding: 20px 24px;
+  min-width: 280px;
 }
 
-.swp-adjustment label {
-    min-width: 100px;
-    font-size: 14px;
-    color: #495057;
-    font-weight: 500;
+.swp-submenu-content.swp-submenu-wide {
+  min-width: 360px;
 }
 
-.swp-adjustment input[type="range"] {
-    flex: 1;
-    flex-shrink: 1;
-    height: 6px;
-    border-radius: 3px;
-    background: #e9ecef;
-    outline: none;
-    -webkit-appearance: none;
+.swp-submenu-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--swp-border);
+  color: var(--swp-text);
 }
 
-.swp-adjustment input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #007bff;
-    cursor: pointer;
-    transition: all 0.2s ease;
+.swp-submenu-group {
+  margin-bottom: 16px;
 }
 
-.swp-adjustment input[type="range"]::-webkit-slider-thumb:hover {
-    background: #0056b3;
-    transform: scale(1.1);
+.swp-submenu-group:last-child {
+  margin-bottom: 0;
 }
 
-.swp-adjustment input[type="range"]::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #007bff;
-    cursor: pointer;
-    border: none;
-    transition: all 0.2s ease;
+.swp-submenu-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--swp-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
 }
 
-.swp-adjustment input[type="range"]::-moz-range-thumb:hover {
-    background: #0056b3;
-    transform: scale(1.1);
+/* Button Group */
+.swp-btn-group {
+  display: flex;
+  gap: 6px;
 }
 
-.swp-value {
-    text-align: right;
-    font-size: 14px;
-    color: #6c757d;
-    font-weight: 500;
+.swp-btn-group-lg .swp-submenu-btn {
+  flex: 1;
+  padding: 12px 16px;
 }
 
-/* Resize Panel */
-.swp-resize-controls {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
+.swp-submenu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 14px;
+  background: var(--swp-bg-light);
+  color: var(--swp-text-secondary);
+  border: 1px solid var(--swp-border);
+  border-radius: var(--swp-radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all var(--swp-transition);
 }
 
-.swp-resize-controls .swp-adjustment {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.swp-submenu-btn:hover {
+  background: var(--swp-bg-hover);
+  color: var(--swp-text);
+  border-color: var(--swp-border-light);
 }
 
-.swp-resize-controls input[type="number"] {
-    flex: 1;
-    padding: 8px 12px;
-    border: 1px solid #dee2e6;
-    border-radius: 6px;
-    font-size: 14px;
-    color: #495057;
+.swp-submenu-btn.active {
+  background: var(--swp-accent);
+  color: var(--swp-accent-contrast);
+  border-color: var(--swp-accent);
 }
 
-.swp-resize-controls input[type="number"]:focus {
-    outline: none;
-    border-color: #007bff;
+.swp-submenu-btn ss-icon {
+  font-size: 18px;
 }
 
-.swp-resize-controls input[type="checkbox"] {
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
+/* Range Slider */
+.swp-range-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.swp-resize-controls label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    font-size: 14px;
-    color: #495057;
+.swp-slider {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  background: var(--swp-bg-dark);
+  border-radius: 3px;
+  outline: none;
 }
 
-.swp-resize-controls button {
-    margin-top: 10px;
+.swp-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--swp-accent);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all var(--swp-transition);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
+.swp-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+  background: var(--swp-accent-hover);
+}
+
+.swp-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--swp-accent);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.swp-range-value {
+  min-width: 48px;
+  font-size: 13px;
+  color: var(--swp-text);
+  text-align: right;
+  font-weight: 500;
+}
+
+/* Color Input */
+.swp-color-input {
+  width: 100%;
+  height: 40px;
+  padding: 4px;
+  background: var(--swp-bg-dark);
+  border: 1px solid var(--swp-border);
+  border-radius: var(--swp-radius-sm);
+  cursor: pointer;
+}
+
+.swp-color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
 
-/* Filters Panel */
-.swp-filters-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    gap: 15px;
+.swp-color-input::-webkit-color-swatch {
+  border: none;
+  border-radius: 4px;
+}
+
+/* Select */
+.swp-select {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--swp-bg-dark);
+  color: var(--swp-text);
+  border: 1px solid var(--swp-border);
+  border-radius: var(--swp-radius-sm);
+  font-size: 14px;
+  cursor: pointer;
+  outline: none;
+  transition: all var(--swp-transition);
+}
+
+.swp-select:focus {
+  border-color: var(--swp-accent);
+  box-shadow: 0 0 0 3px var(--swp-accent-dim);
+}
+
+/* Input Field */
+.swp-input {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--swp-bg-dark);
+  color: var(--swp-text);
+  border: 1px solid var(--swp-border);
+  border-radius: var(--swp-radius-sm);
+  font-size: 14px;
+  outline: none;
+  transition: all var(--swp-transition);
+}
+
+.swp-input:focus {
+  border-color: var(--swp-accent);
+  box-shadow: 0 0 0 3px var(--swp-accent-dim);
+}
+
+/* Resize Inputs */
+.swp-resize-inputs {
+  display: flex;
+  gap: 12px;
+}
+
+.swp-input-group {
+  flex: 1;
+}
+
+.swp-input-group label {
+  display: block;
+  font-size: 12px;
+  color: var(--swp-text-secondary);
+  margin-bottom: 6px;
+}
+
+/* Checkbox */
+.swp-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--swp-text);
+  cursor: pointer;
+}
+
+.swp-checkbox-label input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--swp-accent);
+  cursor: pointer;
+}
+
+/* Button Group Wrap */
+.swp-btn-group-wrap {
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.swp-preset-btn {
+  font-size: 12px !important;
+  padding: 8px 12px !important;
+}
+
+/* Submenu Actions */
+.swp-submenu-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--swp-border);
+}
+
+.swp-submenu-actions .swp-btn {
+  flex: 1;
+}
+
+/* Buttons */
+.swp-btn {
+  padding: 10px 20px;
+  background: var(--swp-bg-light);
+  color: var(--swp-text);
+  border: 1px solid var(--swp-border);
+  border-radius: var(--swp-radius);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all var(--swp-transition);
+}
+
+.swp-btn:hover {
+  background: var(--swp-bg-hover);
+  border-color: var(--swp-border-light);
+}
+
+.swp-btn-primary {
+  background: var(--swp-accent);
+  color: var(--swp-accent-contrast);
+  border-color: var(--swp-accent);
+}
+
+.swp-btn-primary:hover {
+  background: var(--swp-accent-hover);
+  border-color: var(--swp-accent-hover);
+}
+
+/* ==================== FILTER GRID ==================== */
+.swp-filter-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
 }
 
 .swp-filter-btn {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    padding: 12px;
-    border: 2px solid #dee2e6;
-    background: #ffffff;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 13px;
-    color: #495057;
-    transition: all 0.2s ease;
-    font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 8px;
+  background: var(--swp-bg-light);
+  border: 2px solid transparent;
+  border-radius: var(--swp-radius-sm);
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--swp-text-secondary);
+  transition: all var(--swp-transition);
 }
 
 .swp-filter-btn:hover {
-    border-color: #007bff;
-    background: #f8f9fa;
+  border-color: var(--swp-border-light);
+  color: var(--swp-text);
 }
 
 .swp-filter-btn.active {
-    border-color: #007bff;
-    background: #e7f3ff;
-    color: #007bff;
-    font-weight: 600;
+  border-color: var(--swp-accent);
+  color: var(--swp-text);
+  background: var(--swp-accent-dim);
 }
 
 .swp-filter-preview {
-    width: 60px;
-    height: 60px;
-    border-radius: 6px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    display: block;
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1, #96c93d);
+  border-radius: 4px;
+}
+
+.swp-filter-grayscale .swp-filter-preview,
+.swp-filter-btn[data-filter="grayscale"] .swp-filter-preview {
+  filter: grayscale(100%);
 }
 
-.swp-filter-preview[data-filter="grayscale"] {
-    filter: grayscale(100%);
+.swp-filter-sepia .swp-filter-preview,
+.swp-filter-btn[data-filter="sepia"] .swp-filter-preview {
+  filter: sepia(100%);
 }
 
-.swp-filter-preview[data-filter="sepia"] {
-    filter: sepia(100%);
+.swp-filter-invert .swp-filter-preview,
+.swp-filter-btn[data-filter="invert"] .swp-filter-preview {
+  filter: invert(100%);
 }
 
-.swp-filter-preview[data-filter="invert"] {
-    filter: invert(100%);
+.swp-filter-blur .swp-filter-preview,
+.swp-filter-btn[data-filter="blur"] .swp-filter-preview {
+  filter: blur(2px);
 }
 
-.swp-filter-preview[data-filter="blur"] {
-    filter: blur(3px);
+.swp-filter-brightness .swp-filter-preview,
+.swp-filter-btn[data-filter="brightness"] .swp-filter-preview {
+  filter: brightness(130%);
 }
 
-.swp-filter-preview[data-filter="none"] {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.swp-filter-contrast .swp-filter-preview,
+.swp-filter-btn[data-filter="contrast"] .swp-filter-preview {
+  filter: contrast(150%);
 }
 
-/* Responsive Design */
+.swp-filter-sharpen .swp-filter-preview,
+.swp-filter-btn[data-filter="sharpen"] .swp-filter-preview {
+  filter: contrast(120%) saturate(110%);
+}
+
+/* ==================== TEXT INPUT ==================== */
+.swp-text-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ==================== SCROLLBAR ==================== */
+.swp-app ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.swp-app ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.swp-app ::-webkit-scrollbar-thumb {
+  background: var(--swp-border);
+  border-radius: 4px;
+}
+
+.swp-app ::-webkit-scrollbar-thumb:hover {
+  background: var(--swp-border-light);
+}
+
+/* ==================== RESPONSIVE ==================== */
 @media (max-width: 768px) {
-    .swp-toolbar {
-        padding: 10px;
-        gap: 5px;
-    }
-
-    .swp-toolbar-group {
-        gap: 5px;
-    }
-
-    .swp-btn {
-        padding: 6px 12px;
-        font-size: 12px;
-    }
-
-    .swp-btn span:not(.swp-icon) {
-        display: none;
-    }
-
-    .swp-canvas-container {
-        min-height: 300px;
-        padding: 10px;
-    }
-
-    .swp-adjustments-panel,
-    .swp-filters-panel {
-        padding: 15px;
-    }
-
-    .swp-adjustment {
-        flex-wrap: wrap;
-    }
-
-    .swp-adjustment label {
-        min-width: 100%;
-    }
-
-    .swp-filters-grid {
-        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-        gap: 10px;
-    }
-
-    .swp-filter-preview {
-        width: 50px;
-        height: 50px;
-    }
-}
-
-/* Loading State */
-.swp-loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 14px;
-    color: #6c757d;
-}
-
-/* Empty State */
-.swp-empty-state {
-    text-align: center;
-    padding: 60px 20px;
-    color: #6c757d;
-}
-
-.swp-empty-state-icon {
-    font-size: 48px;
-    margin-bottom: 15px;
-    opacity: 0.5;
-}
-
-.swp-empty-state-text {
-    font-size: 16px;
-    margin-bottom: 20px;
-}
-
-/* Animations */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.swp-adjustments-panel.active,
-.swp-filters-panel.active {
-    animation: fadeIn 0.3s ease;
-}
-
-/* Print Styles */
-@media print {
-    .swp-toolbar,
-    .swp-adjustments-panel,
-    .swp-filters-panel {
-        display: none;
-    }
-
-    .swp-canvas-container {
-        padding: 0;
-        background: transparent;
-    }
+  .swp-header {
+    padding: 0 12px;
+  }
+
+  .swp-header-btn span {
+    display: none;
+  }
+
+  .swp-header-btn {
+    padding: 10px 12px;
+  }
+
+  .swp-menu-item {
+    width: 56px;
+    height: 56px;
+    padding: 6px;
+    font-size: 10px;
+  }
+
+  .swp-menu-item ss-icon {
+    font-size: 20px;
+  }
+
+  .swp-menu-bar {
+    height: 72px;
+    gap: 2px;
+    padding: 8px;
+  }
+
+  .swp-submenu-content {
+    min-width: 260px;
+    padding: 16px;
+  }
+
+  .swp-submenu-content.swp-submenu-wide {
+    min-width: 300px;
+  }
+
+  .swp-filter-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .swp-header-left .swp-header-btn:nth-child(2) {
+    display: none;
+  }
+
+  .swp-menu-item {
+    width: 48px;
+    height: 52px;
+  }
+
+  .swp-menu-item span {
+    display: none;
+  }
+
+  .swp-submenu {
+    left: 8px;
+    right: 8px;
+    transform: none;
+  }
+
+  .swp-submenu-content,
+  .swp-submenu-content.swp-submenu-wide {
+    min-width: auto;
+  }
+
+  .swp-filter-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ==================== SIDE PANEL ==================== */
+.swp-side-panel {
+  position: absolute;
+  top: var(--swp-header-height);
+  right: 0;
+  width: 280px;
+  bottom: var(--swp-menu-height);
+  background: var(--swp-bg-medium);
+  border-left: 1px solid var(--swp-border);
+  display: flex;
+  flex-direction: column;
+  z-index: 50;
+  animation: swp-slide-in 0.2s ease;
+}
+
+@keyframes swp-slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.swp-side-panel[hidden] {
+  display: none;
+}
+
+.swp-side-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--swp-bg-light);
+  border-bottom: 1px solid var(--swp-border);
+}
+
+.swp-side-panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--swp-text);
+}
+
+.swp-side-panel-close {
+  width: 28px;
+  height: 28px;
+}
+
+.swp-side-panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.swp-panel-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.swp-panel-empty {
+  text-align: center;
+  color: var(--swp-text-dim);
+  padding: 24px;
+  font-size: 13px;
+}
+
+.swp-panel-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--swp-bg-dark);
+  border-radius: var(--swp-radius);
+  cursor: pointer;
+  transition: all var(--swp-transition);
+  border: 1px solid transparent;
+  font-size: 13px;
+  color: var(--swp-text-secondary);
+}
+
+.swp-panel-item:hover {
+  background: var(--swp-bg-hover);
+  color: var(--swp-text);
+}
+
+.swp-panel-item.active {
+  background: var(--swp-accent-dim);
+  border-color: var(--swp-accent);
+  color: var(--swp-text);
+}
+
+.swp-panel-item ss-icon {
+  font-size: 16px;
+  opacity: 0.7;
+}
+
+.swp-panel-item span {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Layer visibility button */
+.swp-layer-vis-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--swp-text-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--swp-radius-sm);
+  transition: all var(--swp-transition);
+}
+
+.swp-layer-vis-btn:hover {
+  background: var(--swp-bg-light);
+}
+
+.swp-layer-vis-btn.visible {
+  color: var(--swp-accent);
+}
+
+.swp-layer-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.swp-layer-opacity {
+  font-size: 11px;
+  color: var(--swp-text-dim);
+  background: var(--swp-bg-light);
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+/* Panel Actions */
+.swp-panel-actions {
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  border-top: 1px solid var(--swp-border);
+  background: var(--swp-bg-light);
+  justify-content: space-between;
+  margin-top: 12px;
+  border-radius: 10px;
+}
+
+.swp-btn-sm {
+  padding: 8px 12px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.swp-btn-sm ss-icon {
+  font-size: 14px;
+}
+
+.swp-btn-danger {
+  color: var(--swp-error);
+}
+
+.swp-btn-danger:hover {
+  background: var(--swp-error);
+  color: white;
+  border-color: var(--swp-error);
+}
+
+/* Active state for header icon buttons */
+.swp-icon-btn.active {
+  background: var(--swp-accent);
+  color: var(--swp-accent-contrast);
 }