From 45fd15c65f3e790cb70a811d5779e509f31deccc Mon Sep 17 00:00:00 2001
From: Rex <rex@duck.com>
Date: Wed, 10 Dec 2025 09:50:47 -0800
Subject: [PATCH] Redesign UI with modern dark theme and improved UX

- Implement modern dark color scheme (Tokyo Night inspired)
- Add custom styled widgets: ModernButton, ModernSpinbox, CardFrame
- Create compact, no-scroll layout for all controls
- Add labeled time inputs (Hours, Min, Sec, Ms) for clarity
- Make preset buttons additive (adjust values instead of replacing)
- Add syntax highlighting for timestamps in preview
- Add line numbers to preview panel
- Include status bar with keyboard shortcut hints
- Add tooltips to all buttons
- Improve sync dialog with proper sizing and "Calculate" button
- Add keyboard shortcuts (Cmd+O, Cmd+S, Cmd+Shift+A)
- Show subtitle count in status bar after file load
- Add Reset button to restore original content before saving
---
 subtitle_sync.py | 1198 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 984 insertions(+), 214 deletions(-)

diff --git a/subtitle_sync.py b/subtitle_sync.py
index ad9dec8..abad8da 100644
--- a/subtitle_sync.py
+++ b/subtitle_sync.py
@@ -5,155 +5,822 @@
 import os
 
 
+# ============================================================================
+# MODERN COLOR SCHEME
+# ============================================================================
+class Colors:
+    """Modern dark theme color palette"""
+    # Background colors
+    BG_DARK = "#1a1b26"          # Main background
+    BG_MEDIUM = "#24283b"         # Panel background
+    BG_LIGHT = "#2f3549"          # Input/card background
+    BG_HOVER = "#3d4259"          # Hover state
+
+    # Accent colors
+    ACCENT_PRIMARY = "#7aa2f7"    # Primary blue
+    ACCENT_SUCCESS = "#9ece6a"    # Green for success
+    ACCENT_WARNING = "#e0af68"    # Orange/yellow for warnings
+    ACCENT_ERROR = "#f7768e"      # Red for errors
+    ACCENT_PURPLE = "#bb9af7"     # Purple accent
+
+    # Text colors
+    TEXT_PRIMARY = "#c0caf5"      # Main text
+    TEXT_SECONDARY = "#565f89"    # Muted text
+    TEXT_BRIGHT = "#ffffff"       # Bright text
+
+    # Border colors
+    BORDER = "#3d4259"
+    BORDER_FOCUS = "#7aa2f7"
+
+    # Timestamp highlighting
+    TIMESTAMP_BG = "#2d3250"
+    TIMESTAMP_FG = "#7dcfff"
+
+
+# ============================================================================
+# CUSTOM TOOLTIP CLASS
+# ============================================================================
+class Tooltip:
+    """Modern tooltip implementation"""
+    def __init__(self, widget, text, delay=500):
+        self.widget = widget
+        self.text = text
+        self.delay = delay
+        self.tooltip_window = None
+        self.scheduled_id = None
+
+        widget.bind('<Enter>', self.schedule_show)
+        widget.bind('<Leave>', self.hide)
+        widget.bind('<Button>', self.hide)
+
+    def schedule_show(self, event=None):
+        self.scheduled_id = self.widget.after(self.delay, self.show)
+
+    def show(self, event=None):
+        if self.tooltip_window:
+            return
+
+        x = self.widget.winfo_rootx() + self.widget.winfo_width() // 2
+        y = self.widget.winfo_rooty() + self.widget.winfo_height() + 5
+
+        self.tooltip_window = tw = tk.Toplevel(self.widget)
+        tw.wm_overrideredirect(True)
+        tw.wm_geometry(f"+{x}+{y}")
+
+        frame = tk.Frame(tw, bg=Colors.BG_LIGHT, relief=tk.FLAT, bd=1,
+                        highlightbackground=Colors.BORDER, highlightthickness=1)
+        frame.pack()
+
+        label = tk.Label(frame, text=self.text, justify=tk.LEFT,
+                        bg=Colors.BG_LIGHT, fg=Colors.TEXT_PRIMARY,
+                        font=("SF Pro Display", 10), padx=8, pady=4)
+        label.pack()
+
+    def hide(self, event=None):
+        if self.scheduled_id:
+            self.widget.after_cancel(self.scheduled_id)
+            self.scheduled_id = None
+        if self.tooltip_window:
+            self.tooltip_window.destroy()
+            self.tooltip_window = None
+
+
+# ============================================================================
+# CUSTOM STYLED BUTTON
+# ============================================================================
+class ModernButton(tk.Canvas):
+    """Custom styled button with hover effects"""
+    def __init__(self, parent, text, command=None, width=120, height=36,
+                 style="primary", tooltip=None):
+        super().__init__(parent, width=width, height=height,
+                        bg=Colors.BG_MEDIUM, highlightthickness=0, cursor="hand2")
+
+        self.text = text
+        self.command = command
+        self.width = width
+        self.height = height
+        self.style = style
+        self._state = tk.NORMAL
+        self._hover = False
+
+        # Style configurations
+        self.styles = {
+            "primary": {
+                "bg": Colors.ACCENT_PRIMARY,
+                "bg_hover": "#8fb2ff",
+                "fg": Colors.BG_DARK,
+                "disabled_bg": Colors.BG_LIGHT,
+                "disabled_fg": Colors.TEXT_SECONDARY
+            },
+            "secondary": {
+                "bg": Colors.BG_LIGHT,
+                "bg_hover": Colors.BG_HOVER,
+                "fg": Colors.TEXT_PRIMARY,
+                "disabled_bg": Colors.BG_LIGHT,
+                "disabled_fg": Colors.TEXT_SECONDARY
+            },
+            "success": {
+                "bg": Colors.ACCENT_SUCCESS,
+                "bg_hover": "#b0de7a",
+                "fg": Colors.BG_DARK,
+                "disabled_bg": Colors.BG_LIGHT,
+                "disabled_fg": Colors.TEXT_SECONDARY
+            },
+            "danger": {
+                "bg": Colors.ACCENT_ERROR,
+                "bg_hover": "#ff8a9e",
+                "fg": Colors.BG_DARK,
+                "disabled_bg": Colors.BG_LIGHT,
+                "disabled_fg": Colors.TEXT_SECONDARY
+            }
+        }
+
+        self.draw()
+
+        # Bindings
+        self.bind("<Enter>", self.on_enter)
+        self.bind("<Leave>", self.on_leave)
+        self.bind("<Button-1>", self.on_click)
+        self.bind("<ButtonRelease-1>", self.on_release)
+
+        if tooltip:
+            Tooltip(self, tooltip)
+
+    def draw(self):
+        self.delete("all")
+        style = self.styles[self.style]
+
+        if self._state == tk.DISABLED:
+            bg = style["disabled_bg"]
+            fg = style["disabled_fg"]
+        elif self._hover:
+            bg = style["bg_hover"]
+            fg = style["fg"]
+        else:
+            bg = style["bg"]
+            fg = style["fg"]
+
+        # Draw rounded rectangle
+        r = 8  # Corner radius
+        self.create_rounded_rect(2, 2, self.width - 2, self.height - 2, r, fill=bg)
+
+        # Draw text
+        self.create_text(self.width // 2, self.height // 2, text=self.text,
+                        font=("SF Pro Display", 11, "bold"), fill=fg)
+
+    def create_rounded_rect(self, x1, y1, x2, y2, r, **kwargs):
+        points = [
+            x1 + r, y1,
+            x2 - r, y1,
+            x2, y1,
+            x2, y1 + r,
+            x2, y2 - r,
+            x2, y2,
+            x2 - r, y2,
+            x1 + r, y2,
+            x1, y2,
+            x1, y2 - r,
+            x1, y1 + r,
+            x1, y1,
+        ]
+        return self.create_polygon(points, smooth=True, **kwargs)
+
+    def on_enter(self, event):
+        if self._state != tk.DISABLED:
+            self._hover = True
+            self.draw()
+
+    def on_leave(self, event):
+        self._hover = False
+        self.draw()
+
+    def on_click(self, event):
+        if self._state != tk.DISABLED and self.command:
+            # Visual feedback
+            self.move("all", 1, 1)
+
+    def on_release(self, event):
+        if self._state != tk.DISABLED and self.command:
+            self.move("all", -1, -1)
+            self.command()
+
+    def config(self, **kwargs):
+        if "state" in kwargs:
+            self._state = kwargs["state"]
+            self.configure(cursor="hand2" if self._state != tk.DISABLED else "arrow")
+            self.draw()
+
+    def configure(self, **kwargs):
+        if "state" in kwargs:
+            self._state = kwargs["state"]
+            super().configure(cursor="hand2" if self._state != tk.DISABLED else "arrow")
+            self.draw()
+        else:
+            super().configure(**kwargs)
+
+
+# ============================================================================
+# MODERN SPINBOX
+# ============================================================================
+class ModernSpinbox(tk.Frame):
+    """Custom styled spinbox with better visuals"""
+    def __init__(self, parent, from_=0, to=59, textvariable=None, width=80):
+        super().__init__(parent, bg=Colors.BG_MEDIUM)
+
+        self.var = textvariable or tk.StringVar(value=str(from_))
+        self.min_val = from_
+        self.max_val = to
+
+        # Container frame with border
+        self.container = tk.Frame(self, bg=Colors.BG_LIGHT,
+                                 highlightbackground=Colors.BORDER,
+                                 highlightthickness=1)
+        self.container.pack(fill=tk.BOTH, expand=True)
+
+        # Decrement button
+        self.btn_dec = tk.Label(self.container, text="−", font=("SF Pro Display", 14),
+                               bg=Colors.BG_LIGHT, fg=Colors.TEXT_SECONDARY,
+                               cursor="hand2", width=2)
+        self.btn_dec.pack(side=tk.LEFT, padx=(4, 0))
+        self.btn_dec.bind("<Button-1>", self.decrement)
+        self.btn_dec.bind("<Enter>", lambda e: self.btn_dec.config(fg=Colors.ACCENT_PRIMARY))
+        self.btn_dec.bind("<Leave>", lambda e: self.btn_dec.config(fg=Colors.TEXT_SECONDARY))
+
+        # Entry
+        self.entry = tk.Entry(self.container, textvariable=self.var, width=4,
+                             font=("SF Mono", 12), bg=Colors.BG_LIGHT,
+                             fg=Colors.TEXT_PRIMARY, relief=tk.FLAT,
+                             justify=tk.CENTER, insertbackground=Colors.TEXT_PRIMARY,
+                             highlightthickness=0, bd=0)
+        self.entry.pack(side=tk.LEFT, fill=tk.X, expand=True, padx=4, pady=6)
+
+        # Increment button
+        self.btn_inc = tk.Label(self.container, text="+", font=("SF Pro Display", 14),
+                               bg=Colors.BG_LIGHT, fg=Colors.TEXT_SECONDARY,
+                               cursor="hand2", width=2)
+        self.btn_inc.pack(side=tk.RIGHT, padx=(0, 4))
+        self.btn_inc.bind("<Button-1>", self.increment)
+        self.btn_inc.bind("<Enter>", lambda e: self.btn_inc.config(fg=Colors.ACCENT_PRIMARY))
+        self.btn_inc.bind("<Leave>", lambda e: self.btn_inc.config(fg=Colors.TEXT_SECONDARY))
+
+        # Focus effects
+        self.entry.bind("<FocusIn>", self.on_focus_in)
+        self.entry.bind("<FocusOut>", self.on_focus_out)
+
+        # Mouse wheel support
+        self.entry.bind("<MouseWheel>", self.on_mousewheel)
+        self.container.bind("<MouseWheel>", self.on_mousewheel)
+
+    def on_focus_in(self, event):
+        self.container.config(highlightbackground=Colors.BORDER_FOCUS)
+
+    def on_focus_out(self, event):
+        self.container.config(highlightbackground=Colors.BORDER)
+        self.validate_value()
+
+    def validate_value(self):
+        try:
+            val = int(self.var.get())
+            val = max(self.min_val, min(self.max_val, val))
+            self.var.set(str(val))
+        except ValueError:
+            self.var.set(str(self.min_val))
+
+    def increment(self, event=None):
+        try:
+            val = int(self.var.get())
+            if val < self.max_val:
+                self.var.set(str(val + 1))
+        except ValueError:
+            self.var.set(str(self.min_val))
+
+    def decrement(self, event=None):
+        try:
+            val = int(self.var.get())
+            if val > self.min_val:
+                self.var.set(str(val - 1))
+        except ValueError:
+            self.var.set(str(self.min_val))
+
+    def on_mousewheel(self, event):
+        if event.delta > 0:
+            self.increment()
+        else:
+            self.decrement()
+
+
+# ============================================================================
+# MODERN CARD FRAME
+# ============================================================================
+class CardFrame(tk.Frame):
+    """Modern card-style container"""
+    def __init__(self, parent, title=None, **kwargs):
+        super().__init__(parent, bg=Colors.BG_MEDIUM, **kwargs)
+
+        # Inner container with padding
+        self.inner = tk.Frame(self, bg=Colors.BG_MEDIUM)
+        self.inner.pack(fill=tk.BOTH, expand=True, padx=2, pady=2)
+
+        if title:
+            title_frame = tk.Frame(self.inner, bg=Colors.BG_MEDIUM)
+            title_frame.pack(fill=tk.X, pady=(0, 12))
+
+            tk.Label(title_frame, text=title, font=("SF Pro Display", 12, "bold"),
+                    bg=Colors.BG_MEDIUM, fg=Colors.TEXT_PRIMARY).pack(side=tk.LEFT)
+
+            # Decorative line
+            tk.Frame(title_frame, bg=Colors.BORDER, height=1).pack(
+                side=tk.LEFT, fill=tk.X, expand=True, padx=(12, 0), pady=8)
+
+    def get_inner(self):
+        return self.inner
+
+
+# ============================================================================
+# STATUS BAR
+# ============================================================================
+class StatusBar(tk.Frame):
+    """Modern status bar with animations"""
+    def __init__(self, parent):
+        super().__init__(parent, bg=Colors.BG_DARK, height=32)
+        self.pack_propagate(False)
+
+        # Status icon
+        self.icon_label = tk.Label(self, text="●", font=("SF Pro Display", 10),
+                                  bg=Colors.BG_DARK, fg=Colors.TEXT_SECONDARY)
+        self.icon_label.pack(side=tk.LEFT, padx=(12, 6))
+
+        # Status text
+        self.status_label = tk.Label(self, text="Ready", font=("SF Pro Display", 10),
+                                    bg=Colors.BG_DARK, fg=Colors.TEXT_SECONDARY)
+        self.status_label.pack(side=tk.LEFT)
+
+        # Right side info
+        self.info_label = tk.Label(self, text="", font=("SF Pro Display", 10),
+                                  bg=Colors.BG_DARK, fg=Colors.TEXT_SECONDARY)
+        self.info_label.pack(side=tk.RIGHT, padx=12)
+
+        # Keyboard shortcuts hint
+        self.shortcut_label = tk.Label(self, text="⌘O: Open  •  ⌘S: Save  •  ⌘⇧A: Apply",
+                                      font=("SF Pro Display", 9),
+                                      bg=Colors.BG_DARK, fg=Colors.TEXT_SECONDARY)
+        self.shortcut_label.pack(side=tk.RIGHT, padx=12)
+
+    def set_status(self, text, status_type="info"):
+        colors = {
+            "info": Colors.TEXT_SECONDARY,
+            "success": Colors.ACCENT_SUCCESS,
+            "warning": Colors.ACCENT_WARNING,
+            "error": Colors.ACCENT_ERROR,
+            "working": Colors.ACCENT_PRIMARY
+        }
+        color = colors.get(status_type, Colors.TEXT_SECONDARY)
+        self.icon_label.config(fg=color)
+        self.status_label.config(text=text, fg=color)
+
+    def set_info(self, text):
+        self.info_label.config(text=text)
+
+
+# ============================================================================
+# MAIN APPLICATION CLASS
+# ============================================================================
 class SRTShifter:
     def __init__(self, root):
         self.root = root
-        self.root.title("SRT Subtitle Shifter")
-        self.root.geometry("1000x600")
+        self.root.title("SubtitleSync")
+        self.root.geometry("1100x700")
+        self.root.minsize(900, 600)
         self.root.resizable(True, True)
 
+        # Set dark background
+        self.root.configure(bg=Colors.BG_DARK)
+
+        # Configure for macOS
+        try:
+            self.root.tk.call('tk', 'scaling', 2.0)  # HiDPI support
+        except:
+            pass
+
         self.file_path = None
-        self.shifted_content = None  # Store the shifted content before saving
+        self.shifted_content = None
+        self.original_content = None
 
-        # Configure style
-        style = ttk.Style()
-        style.theme_use('default')
+        # Build UI
+        self.create_ui()
 
-        # Configure grid weights for resizing
-        root.columnconfigure(0, weight=1)
-        root.rowconfigure(0, weight=1)
+        # Bind keyboard shortcuts
+        self.bind_shortcuts()
 
-        # Main container with two columns
-        main_container = ttk.Frame(root)
-        main_container.grid(row=0, column=0, sticky=(tk.W, tk.E, tk.N, tk.S))
-        main_container.columnconfigure(0, weight=1)
-        main_container.columnconfigure(1, weight=2)
-        main_container.rowconfigure(0, weight=1)
+        # Initialize status
+        self.status_bar.set_status("Ready to sync subtitles", "info")
 
-        # Left panel for controls
-        main_frame = ttk.Frame(main_container, padding="20")
-        main_frame.grid(row=0, column=0, sticky=(tk.W, tk.E, tk.N, tk.S))
+    def create_ui(self):
+        """Build the main UI layout"""
+        # Main container
+        main_container = tk.Frame(self.root, bg=Colors.BG_DARK)
+        main_container.pack(fill=tk.BOTH, expand=True)
 
-        # Title
-        title_label = ttk.Label(main_frame, text="SRT Subtitle Time Shifter",
-                               font=("Arial", 16, "bold"))
-        title_label.grid(row=0, column=0, columnspan=3, pady=(0, 20))
+        # Header
+        self.create_header(main_container)
 
-        # File selection
-        file_frame = ttk.LabelFrame(main_frame, text="Select SRT File", padding="10")
-        file_frame.grid(row=1, column=0, columnspan=3, sticky=(tk.W, tk.E), pady=(0, 20))
+        # Content area (two panels)
+        content_frame = tk.Frame(main_container, bg=Colors.BG_DARK)
+        content_frame.pack(fill=tk.BOTH, expand=True, padx=20, pady=(0, 10))
+        content_frame.columnconfigure(0, weight=0, minsize=320)
+        content_frame.columnconfigure(1, weight=1)
+        content_frame.rowconfigure(0, weight=1)
 
-        self.file_label = ttk.Label(file_frame, text="No file selected",
-                                    foreground="gray")
-        self.file_label.grid(row=0, column=0, sticky=tk.W, padx=(0, 10))
+        # Left panel (controls)
+        self.create_left_panel(content_frame)
 
-        browse_btn = ttk.Button(file_frame, text="Browse", command=self.browse_file)
-        browse_btn.grid(row=0, column=1)
+        # Right panel (preview)
+        self.create_right_panel(content_frame)
 
-        # Time shift settings
-        shift_frame = ttk.LabelFrame(main_frame, text="Time Shift Settings", padding="10")
-        shift_frame.grid(row=2, column=0, columnspan=3, sticky=(tk.W, tk.E), pady=(0, 20))
+        # Status bar
+        self.status_bar = StatusBar(main_container)
+        self.status_bar.pack(fill=tk.X, side=tk.BOTTOM)
 
-        # Direction (Plus/Minus)
-        ttk.Label(shift_frame, text="Direction:").grid(row=0, column=0, sticky=tk.W, pady=5)
-        self.direction_var = tk.StringVar(value="+")
+    def create_header(self, parent):
+        """Create the app header - compact version"""
+        header = tk.Frame(parent, bg=Colors.BG_DARK)
+        header.pack(fill=tk.X, padx=20, pady=(12, 8))
 
-        direction_frame = ttk.Frame(shift_frame)
-        direction_frame.grid(row=0, column=1, sticky=tk.W, pady=5)
+        # App icon/title in one line
+        tk.Label(header, text="🎬", font=("SF Pro Display", 20),
+                bg=Colors.BG_DARK).pack(side=tk.LEFT, padx=(0, 8))
 
-        ttk.Radiobutton(direction_frame, text="+ (Forward)", variable=self.direction_var,
-                       value="+").pack(side=tk.LEFT, padx=(0, 10))
-        ttk.Radiobutton(direction_frame, text="- (Backward)", variable=self.direction_var,
-                       value="-").pack(side=tk.LEFT)
+        tk.Label(header, text="SubtitleSync", font=("SF Pro Display", 18, "bold"),
+                bg=Colors.BG_DARK, fg=Colors.TEXT_BRIGHT).pack(side=tk.LEFT)
 
-        # Hours
-        ttk.Label(shift_frame, text="Hours:").grid(row=1, column=0, sticky=tk.W, pady=5)
-        self.hours_var = tk.StringVar(value="0")
-        hours_spinbox = ttk.Spinbox(shift_frame, from_=0, to=23, textvariable=self.hours_var,
-                                   width=10)
-        hours_spinbox.grid(row=1, column=1, sticky=tk.W, pady=5)
+    def create_left_panel(self, parent):
+        """Create the left control panel - compact, no scroll needed"""
+        left_panel = tk.Frame(parent, bg=Colors.BG_DARK)
+        left_panel.grid(row=0, column=0, sticky="nsew", padx=(0, 10))
 
-        # Minutes
-        ttk.Label(shift_frame, text="Minutes:").grid(row=2, column=0, sticky=tk.W, pady=5)
-        self.minutes_var = tk.StringVar(value="0")
-        minutes_spinbox = ttk.Spinbox(shift_frame, from_=0, to=59, textvariable=self.minutes_var,
-                                     width=10)
-        minutes_spinbox.grid(row=2, column=1, sticky=tk.W, pady=5)
+        # File selection - compact
+        file_frame = tk.Frame(left_panel, bg=Colors.BG_MEDIUM)
+        file_frame.pack(fill=tk.X, pady=(0, 8))
 
-        # Seconds
-        ttk.Label(shift_frame, text="Seconds:").grid(row=3, column=0, sticky=tk.W, pady=5)
-        self.seconds_var = tk.StringVar(value="2")
-        seconds_spinbox = ttk.Spinbox(shift_frame, from_=0, to=59, textvariable=self.seconds_var,
-                                     width=10)
-        seconds_spinbox.grid(row=3, column=1, sticky=tk.W, pady=5)
+        file_inner = tk.Frame(file_frame, bg=Colors.BG_MEDIUM)
+        file_inner.pack(fill=tk.X, padx=12, pady=10)
 
-        # Milliseconds
-        ttk.Label(shift_frame, text="Milliseconds:").grid(row=4, column=0, sticky=tk.W, pady=5)
-        self.milliseconds_var = tk.StringVar(value="0")
-        milliseconds_spinbox = ttk.Spinbox(shift_frame, from_=0, to=999,
-                                          textvariable=self.milliseconds_var, width=10)
-        milliseconds_spinbox.grid(row=4, column=1, sticky=tk.W, pady=5)
+        tk.Label(file_inner, text="File", font=("SF Pro Display", 11, "bold"),
+                bg=Colors.BG_MEDIUM, fg=Colors.TEXT_PRIMARY).pack(anchor=tk.W)
 
-        # Action buttons
-        button_frame = ttk.Frame(main_frame)
-        button_frame.grid(row=3, column=0, columnspan=3, pady=20)
+        self.file_label = tk.Label(file_inner, text="No file selected",
+                                  font=("SF Pro Display", 10),
+                                  bg=Colors.BG_MEDIUM, fg=Colors.TEXT_SECONDARY)
+        self.file_label.pack(anchor=tk.W, pady=(4, 8))
 
-        self.preview_btn = ttk.Button(button_frame, text="Apply Shift",
-                                      command=self.preview_shift, state=tk.DISABLED)
-        self.preview_btn.pack(side=tk.LEFT, padx=5)
+        self.browse_btn = ModernButton(file_inner, text="Browse",
+                                       command=self.browse_file, width=100, height=30,
+                                       style="secondary", tooltip="Open file (⌘O)")
+        self.browse_btn.pack(anchor=tk.W)
 
-        self.save_btn = ttk.Button(button_frame, text="Save File",
-                                   command=self.save_file, state=tk.DISABLED)
-        self.save_btn.pack(side=tk.LEFT, padx=5)
+        # Time Shift section - compact
+        shift_frame = tk.Frame(left_panel, bg=Colors.BG_MEDIUM)
+        shift_frame.pack(fill=tk.X, pady=(0, 8))
 
-        ttk.Button(button_frame, text="Exit", command=root.quit).pack(side=tk.LEFT, padx=5)
+        shift_inner = tk.Frame(shift_frame, bg=Colors.BG_MEDIUM)
+        shift_inner.pack(fill=tk.X, padx=12, pady=10)
 
-        # Right panel for SRT content display
-        right_panel = ttk.Frame(main_container, padding="20")
-        right_panel.grid(row=0, column=1, sticky=(tk.W, tk.E, tk.N, tk.S))
-        right_panel.columnconfigure(0, weight=1)
+        tk.Label(shift_inner, text="Time Shift", font=("SF Pro Display", 11, "bold"),
+                bg=Colors.BG_MEDIUM, fg=Colors.TEXT_PRIMARY).pack(anchor=tk.W, pady=(0, 8))
+
+        # Direction toggle - inline
+        self.direction_var = tk.StringVar(value="+")
+        dir_row = tk.Frame(shift_inner, bg=Colors.BG_MEDIUM)
+        dir_row.pack(fill=tk.X, pady=(0, 10))
+
+        self.forward_btn = tk.Label(dir_row, text="+",
+                                   font=("SF Pro Display", 12, "bold"),
+                                   bg=Colors.ACCENT_PRIMARY, fg=Colors.BG_DARK,
+                                   padx=12, pady=4, cursor="hand2")
+        self.forward_btn.pack(side=tk.LEFT, padx=(0, 4))
+        self.forward_btn.bind("<Button-1>", lambda e: self.set_direction("+"))
+
+        self.backward_btn = tk.Label(dir_row, text="−",
+                                    font=("SF Pro Display", 12),
+                                    bg=Colors.BG_LIGHT, fg=Colors.TEXT_PRIMARY,
+                                    padx=12, pady=4, cursor="hand2")
+        self.backward_btn.pack(side=tk.LEFT)
+        self.backward_btn.bind("<Button-1>", lambda e: self.set_direction("-"))
+
+        # Time inputs with labels
+        self.hours_var = tk.StringVar(value="0")
+        self.minutes_var = tk.StringVar(value="0")
+        self.seconds_var = tk.StringVar(value="2")
+        self.milliseconds_var = tk.StringVar(value="0")
+
+        time_row = tk.Frame(shift_inner, bg=Colors.BG_MEDIUM)
+        time_row.pack(fill=tk.X, pady=(0, 10))
+
+        self.create_labeled_time_input(time_row, "Hours", self.hours_var, 0, 23)
+        self.create_labeled_time_input(time_row, "Min", self.minutes_var, 0, 59)
+        self.create_labeled_time_input(time_row, "Sec", self.seconds_var, 0, 59)
+        self.create_labeled_time_input(time_row, "Ms", self.milliseconds_var, 0, 999, width=4)
+
+        # Quick presets - compact
+        presets_row = tk.Frame(shift_inner, bg=Colors.BG_MEDIUM)
+        presets_row.pack(fill=tk.X)
+
+        for text, ms in [("−1s", -1000), ("−.5", -500), ("+.5", 500), ("+1s", 1000)]:
+            btn = tk.Label(presets_row, text=text, font=("SF Mono", 9),
+                          bg=Colors.BG_LIGHT, fg=Colors.TEXT_PRIMARY,
+                          padx=8, pady=3, cursor="hand2")
+            btn.pack(side=tk.LEFT, padx=(0, 4))
+            btn.bind("<Button-1>", lambda e, m=ms: self.apply_preset(m))
+            btn.bind("<Enter>", lambda e, b=btn: b.config(bg=Colors.BG_HOVER))
+            btn.bind("<Leave>", lambda e, b=btn: b.config(bg=Colors.BG_LIGHT))
+
+        # Actions section - compact
+        action_frame = tk.Frame(left_panel, bg=Colors.BG_MEDIUM)
+        action_frame.pack(fill=tk.X)
+
+        action_inner = tk.Frame(action_frame, bg=Colors.BG_MEDIUM)
+        action_inner.pack(fill=tk.X, padx=12, pady=10)
+
+        tk.Label(action_inner, text="Actions", font=("SF Pro Display", 11, "bold"),
+                bg=Colors.BG_MEDIUM, fg=Colors.TEXT_PRIMARY).pack(anchor=tk.W, pady=(0, 8))
+
+        # All buttons in one row
+        btn_row = tk.Frame(action_inner, bg=Colors.BG_MEDIUM)
+        btn_row.pack(fill=tk.X)
+
+        self.apply_btn = ModernButton(btn_row, text="Apply",
+                                      command=self.preview_shift, width=80, height=30,
+                                      style="primary", tooltip="Preview shift (⌘⇧A)")
+        self.apply_btn.pack(side=tk.LEFT, padx=(0, 6))
+        self.apply_btn.config(state=tk.DISABLED)
+
+        self.save_btn = ModernButton(btn_row, text="Save",
+                                     command=self.save_file, width=80, height=30,
+                                     style="success", tooltip="Save file (⌘S)")
+        self.save_btn.pack(side=tk.LEFT, padx=(0, 6))
+        self.save_btn.config(state=tk.DISABLED)
+
+        self.reset_btn = ModernButton(btn_row, text="Reset",
+                                      command=self.reset_preview, width=80, height=30,
+                                      style="secondary", tooltip="Reset preview")
+        self.reset_btn.pack(side=tk.LEFT)
+        self.reset_btn.config(state=tk.DISABLED)
+
+    def create_labeled_time_input(self, parent, label, var, min_val, max_val, width=3):
+        """Create a labeled time input"""
+        container = tk.Frame(parent, bg=Colors.BG_MEDIUM)
+        container.pack(side=tk.LEFT, padx=(0, 8))
+
+        tk.Label(container, text=label, font=("SF Pro Display", 9),
+                bg=Colors.BG_MEDIUM, fg=Colors.TEXT_SECONDARY).pack(anchor=tk.W)
+
+        frame = tk.Frame(container, bg=Colors.BG_LIGHT, highlightbackground=Colors.BORDER,
+                        highlightthickness=1)
+        frame.pack(pady=(2, 0))
+
+        entry = tk.Entry(frame, textvariable=var, width=width,
+                        font=("SF Mono", 11), bg=Colors.BG_LIGHT,
+                        fg=Colors.TEXT_PRIMARY, relief=tk.FLAT,
+                        justify=tk.CENTER, insertbackground=Colors.TEXT_PRIMARY,
+                        highlightthickness=0, bd=0)
+        entry.pack(padx=4, pady=4)
+
+        def validate(event):
+            try:
+                val = int(var.get())
+                val = max(min_val, min(max_val, val))
+                var.set(str(val))
+            except ValueError:
+                var.set(str(min_val))
+
+        entry.bind("<FocusOut>", validate)
+
+    def create_right_panel(self, parent):
+        """Create the right preview panel"""
+        right_panel = tk.Frame(parent, bg=Colors.BG_DARK)
+        right_panel.grid(row=0, column=1, sticky="nsew")
         right_panel.rowconfigure(1, weight=1)
+        right_panel.columnconfigure(0, weight=1)
 
-        # Title and sync button for content panel
-        content_header = ttk.Frame(right_panel)
-        content_header.grid(row=0, column=0, sticky=(tk.W, tk.E), pady=(0, 10))
-        content_header.columnconfigure(0, weight=1)
-
-        content_title = ttk.Label(content_header, text="SRT Content Preview",
-                                 font=("Arial", 12, "bold"))
-        content_title.grid(row=0, column=0, sticky=tk.W)
-
-        self.sync_btn = ttk.Button(content_header, text="Sync Selected Line",
-                                   command=self.sync_selected_line, state=tk.DISABLED)
-        self.sync_btn.grid(row=0, column=1, padx=(10, 0))
-
-        # Text widget with scrollbar
-        text_frame = ttk.Frame(right_panel)
-        text_frame.grid(row=1, column=0, sticky=(tk.W, tk.E, tk.N, tk.S))
-        text_frame.columnconfigure(0, weight=1)
-        text_frame.rowconfigure(0, weight=1)
-
-        # Scrollbar
-        scrollbar = ttk.Scrollbar(text_frame)
-        scrollbar.grid(row=0, column=1, sticky=(tk.N, tk.S))
-
-        # Text widget
-        self.content_text = tk.Text(text_frame, wrap=tk.WORD,
-                                   yscrollcommand=scrollbar.set,
-                                   font=("Courier", 10),
-                                   bg="#f5f5f5", fg="#1a1a1a", relief=tk.SUNKEN,
-                                   padx=10, pady=10)
-        self.content_text.grid(row=0, column=0, sticky=(tk.W, tk.E, tk.N, tk.S))
-        scrollbar.config(command=self.content_text.yview)
-
-        # Make text selectable
+        # Header
+        header = tk.Frame(right_panel, bg=Colors.BG_DARK)
+        header.grid(row=0, column=0, sticky="ew", pady=(0, 10))
+
+        tk.Label(header, text="Preview", font=("SF Pro Display", 12, "bold"),
+                bg=Colors.BG_DARK, fg=Colors.TEXT_PRIMARY).pack(side=tk.LEFT)
+
+        self.sync_btn = ModernButton(header, text="Sync Line",
+                                     command=self.sync_selected_line, width=100,
+                                     style="secondary", tooltip="Sync selected timestamp")
+        self.sync_btn.pack(side=tk.RIGHT)
+        self.sync_btn.config(state=tk.DISABLED)
+
+        # Text area container
+        text_container = tk.Frame(right_panel, bg=Colors.BG_MEDIUM,
+                                 highlightbackground=Colors.BORDER,
+                                 highlightthickness=1)
+        text_container.grid(row=1, column=0, sticky="nsew")
+        text_container.rowconfigure(0, weight=1)
+        text_container.columnconfigure(0, weight=1)
+
+        # Line numbers
+        self.line_numbers = tk.Text(text_container, width=4, font=("SF Mono", 11),
+                                   bg=Colors.BG_LIGHT, fg=Colors.TEXT_SECONDARY,
+                                   relief=tk.FLAT, padx=8, pady=12, state=tk.DISABLED,
+                                   cursor="arrow", highlightthickness=0)
+        self.line_numbers.grid(row=0, column=0, sticky="ns")
+
+        # Main text widget
+        self.content_text = tk.Text(text_container, wrap=tk.WORD,
+                                   font=("SF Mono", 11), bg=Colors.BG_MEDIUM,
+                                   fg=Colors.TEXT_PRIMARY, relief=tk.FLAT,
+                                   padx=12, pady=12, insertbackground=Colors.TEXT_PRIMARY,
+                                   selectbackground=Colors.ACCENT_PRIMARY,
+                                   selectforeground=Colors.BG_DARK,
+                                   highlightthickness=0)
+        self.content_text.grid(row=0, column=1, sticky="nsew")
+
+        # Vertical scrollbar only
+        v_scrollbar = tk.Scrollbar(text_container, orient=tk.VERTICAL,
+                                  command=self.on_scroll_y)
+        v_scrollbar.grid(row=0, column=2, sticky="ns")
+
+        self.content_text.config(yscrollcommand=v_scrollbar.set)
+
+        # Configure tags for syntax highlighting
+        self.content_text.tag_configure("timestamp",
+                                       foreground=Colors.TIMESTAMP_FG,
+                                       font=("SF Mono", 11, "bold"))
+        self.content_text.tag_configure("number",
+                                       foreground=Colors.ACCENT_PURPLE)
+        self.content_text.tag_configure("arrow",
+                                       foreground=Colors.TEXT_SECONDARY)
+
+        # Bind events
         self.content_text.bind("<<Selection>>", self.on_text_selection)
+        self.content_text.bind("<KeyRelease>", self.update_line_numbers)
+        self.content_text.bind("<MouseWheel>", self.on_mousewheel)
 
         # Initial message
-        self.content_text.insert("1.0", "No file loaded.\n\nSelect an SRT file to view its content here.")
+        self.show_welcome_message()
+
+    def show_welcome_message(self):
+        """Show welcome message in preview"""
+        self.content_text.config(state=tk.NORMAL)
+        self.content_text.delete("1.0", tk.END)
+
+        welcome = """
+   Welcome to SubtitleSync!
+
+   ─────────────────────────────────────
+
+   Get started:
+
+   1. Click "Browse Files" or drop an SRT file
+   2. Set your desired time shift
+   3. Click "Apply Shift" to preview
+   4. Save your synchronized subtitles
+
+   ─────────────────────────────────────
+
+   Tips:
+
+   • Use "Sync Line" to align a specific
+     subtitle to a known timestamp
+
+   • Quick presets help with common adjustments
+
+   • Keyboard shortcuts:
+     ⌘O - Open file
+     ⌘S - Save file
+     ⌘⇧A - Apply shift
+
+"""
+        self.content_text.insert("1.0", welcome)
+        self.content_text.tag_add("timestamp", "3.3", "3.24")  # "Welcome to SubtitleSync!"
         self.content_text.config(state=tk.DISABLED)
+        self.update_line_numbers()
+
+    def on_scroll_y(self, *args):
+        """Sync line numbers scroll with main text"""
+        self.content_text.yview(*args)
+        self.line_numbers.yview(*args)
+
+    def on_mousewheel(self, event):
+        """Handle mousewheel scrolling"""
+        self.content_text.yview_scroll(int(-1 * (event.delta / 120)), "units")
+        self.line_numbers.yview_scroll(int(-1 * (event.delta / 120)), "units")
+        return "break"
+
+    def update_line_numbers(self, event=None):
+        """Update line numbers display"""
+        self.line_numbers.config(state=tk.NORMAL)
+        self.line_numbers.delete("1.0", tk.END)
+
+        line_count = int(self.content_text.index("end-1c").split(".")[0])
+        line_numbers_text = "\n".join(str(i) for i in range(1, line_count + 1))
+        self.line_numbers.insert("1.0", line_numbers_text)
+        self.line_numbers.config(state=tk.DISABLED)
+
+    def highlight_syntax(self):
+        """Apply syntax highlighting to SRT content"""
+        self.content_text.tag_remove("timestamp", "1.0", tk.END)
+        self.content_text.tag_remove("number", "1.0", tk.END)
+        self.content_text.tag_remove("arrow", "1.0", tk.END)
+
+        content = self.content_text.get("1.0", tk.END)
+
+        # Highlight timestamps
+        timestamp_pattern = r'\d{2}:\d{2}:\d{2},\d{3}'
+        for match in re.finditer(timestamp_pattern, content):
+            start_idx = f"1.0 + {match.start()} chars"
+            end_idx = f"1.0 + {match.end()} chars"
+            self.content_text.tag_add("timestamp", start_idx, end_idx)
+
+        # Highlight arrows
+        arrow_pattern = r'-->'
+        for match in re.finditer(arrow_pattern, content):
+            start_idx = f"1.0 + {match.start()} chars"
+            end_idx = f"1.0 + {match.end()} chars"
+            self.content_text.tag_add("arrow", start_idx, end_idx)
+
+        # Highlight subtitle numbers (lines that are just numbers)
+        for match in re.finditer(r'^(\d+)\s*$', content, re.MULTILINE):
+            start_idx = f"1.0 + {match.start()} chars"
+            end_idx = f"1.0 + {match.end()} chars"
+            self.content_text.tag_add("number", start_idx, end_idx)
+
+    def bind_shortcuts(self):
+        """Bind keyboard shortcuts"""
+        self.root.bind("<Command-o>", lambda e: self.browse_file())
+        self.root.bind("<Command-s>", lambda e: self.save_file())
+        self.root.bind("<Command-Shift-a>", lambda e: self.preview_shift())
+        self.root.bind("<Command-Shift-A>", lambda e: self.preview_shift())
+        self.root.bind("<Escape>", lambda e: self.root.focus_set())
+
+    def set_direction(self, direction):
+        """Toggle direction selection"""
+        self.direction_var.set(direction)
+        if direction == "+":
+            self.forward_btn.config(bg=Colors.ACCENT_PRIMARY, fg=Colors.BG_DARK,
+                                   font=("SF Pro Display", 11, "bold"))
+            self.backward_btn.config(bg=Colors.BG_LIGHT, fg=Colors.TEXT_PRIMARY,
+                                    font=("SF Pro Display", 11))
+        else:
+            self.forward_btn.config(bg=Colors.BG_LIGHT, fg=Colors.TEXT_PRIMARY,
+                                   font=("SF Pro Display", 11))
+            self.backward_btn.config(bg=Colors.ACCENT_PRIMARY, fg=Colors.BG_DARK,
+                                    font=("SF Pro Display", 11, "bold"))
+
+    def apply_preset(self, delta_ms):
+        """Add/subtract from current time shift values"""
+        # Get current total milliseconds
+        try:
+            current_h = int(self.hours_var.get())
+            current_m = int(self.minutes_var.get())
+            current_s = int(self.seconds_var.get())
+            current_ms = int(self.milliseconds_var.get())
+        except ValueError:
+            current_h = current_m = current_s = current_ms = 0
+
+        # Calculate current total in ms
+        current_total_ms = (current_h * 3600000 + current_m * 60000 +
+                           current_s * 1000 + current_ms)
+
+        # Apply direction
+        direction = 1 if self.direction_var.get() == "+" else -1
+
+        # Add delta (respecting current direction)
+        new_total_ms = current_total_ms + (delta_ms * direction)
+
+        # If result is negative, flip direction and make positive
+        if new_total_ms < 0:
+            self.set_direction("-" if self.direction_var.get() == "+" else "+")
+            new_total_ms = abs(new_total_ms)
+
+        # Convert back to h:m:s:ms
+        new_h = new_total_ms // 3600000
+        new_total_ms %= 3600000
+        new_m = new_total_ms // 60000
+        new_total_ms %= 60000
+        new_s = new_total_ms // 1000
+        new_ms = new_total_ms % 1000
+
+        # Clamp values
+        new_h = min(23, new_h)
+
+        self.hours_var.set(str(new_h))
+        self.minutes_var.set(str(new_m))
+        self.seconds_var.set(str(new_s))
+        self.milliseconds_var.set(str(new_ms))
+
+        # Show status
+        sign = '+' if self.direction_var.get() == '+' else '−'
+        delta_sign = '+' if delta_ms >= 0 else ''
+        self.status_bar.set_status(f"Adjusted by {delta_sign}{delta_ms}ms → {sign}{new_h}:{new_m:02d}:{new_s:02d}.{new_ms:03d}", "info")
 
     def browse_file(self):
+        """Open file browser dialog"""
         file_path = filedialog.askopenfilename(
             title="Select SRT File",
             filetypes=[("SRT files", "*.srt"), ("All files", "*.*")]
@@ -161,12 +828,31 @@ def browse_file(self):
         if file_path:
             self.file_path = file_path
             self.shifted_content = None
-            self.file_label.config(text=os.path.basename(file_path), foreground="black")
-            self.preview_btn.config(state=tk.NORMAL)
-            self.save_btn.config(state=tk.DISABLED)
+
+            # Update file label
+            filename = os.path.basename(file_path)
+            self.file_label.config(text=f"📄 {filename}", fg=Colors.TEXT_PRIMARY)
+
+            # Enable buttons
+            self.apply_btn.config(state=tk.NORMAL)
             self.sync_btn.config(state=tk.NORMAL)
+            self.save_btn.config(state=tk.DISABLED)
+            self.reset_btn.config(state=tk.DISABLED)
+
+            # Load content
             self.load_srt_content()
 
+            # Update status
+            self.status_bar.set_status(f"Loaded: {filename}", "success")
+            self.status_bar.set_info(f"{self.count_subtitles()} subtitles")
+
+    def count_subtitles(self):
+        """Count number of subtitles in loaded file"""
+        if not self.original_content:
+            return 0
+        pattern = r'^\d+\s*$'
+        return len(re.findall(pattern, self.original_content, re.MULTILINE))
+
     def load_srt_content(self):
         """Load and display SRT file content"""
         if not self.file_path:
@@ -176,136 +862,180 @@ def load_srt_content(self):
             with open(self.file_path, 'r', encoding='utf-8') as f:
                 content = f.read()
 
+            self.original_content = content
+
             # Update text widget
             self.content_text.config(state=tk.NORMAL)
             self.content_text.delete("1.0", tk.END)
             self.content_text.insert("1.0", content)
+
+            # Apply syntax highlighting
+            self.highlight_syntax()
+
             self.content_text.config(state=tk.DISABLED)
+            self.update_line_numbers()
 
         except Exception as e:
-            messagebox.showerror("Error", f"Could not load file:\n{str(e)}")
+            self.show_error("Load Error", f"Could not load file:\n{str(e)}")
 
     def on_text_selection(self, event=None):
         """Handle text selection in the content viewer"""
-        # This is just a placeholder to track selection
         pass
 
     def sync_selected_line(self):
         """Sync a selected subtitle line to a specified timestamp"""
         if not self.file_path:
-            messagebox.showerror("Error", "Please select an SRT file first.")
+            self.show_error("Error", "Please select an SRT file first.")
             return
 
+        # Enable text widget temporarily for selection
+        self.content_text.config(state=tk.NORMAL)
+
         try:
             # Get selected text
             try:
                 selection = self.content_text.get(tk.SEL_FIRST, tk.SEL_LAST)
             except tk.TclError:
-                messagebox.showwarning("No Selection",
+                self.show_warning("No Selection",
                     "Please select a subtitle line (including its timestamp) in the preview.")
+                self.content_text.config(state=tk.DISABLED)
                 return
 
-            # Extract timestamp from selection using regex
+            # Extract timestamp from selection
             timestamp_pattern = r'(\d{2}:\d{2}:\d{2},\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2},\d{3})'
             match = re.search(timestamp_pattern, selection)
 
             if not match:
-                messagebox.showwarning("Invalid Selection",
+                self.show_warning("Invalid Selection",
                     "Please select text that includes a timestamp line.\nExample: 00:00:10,500 --> 00:00:13,000")
+                self.content_text.config(state=tk.DISABLED)
                 return
 
             current_start = match.group(1)
 
-            # Create dialog to get desired timestamp
-            sync_dialog = tk.Toplevel(self.root)
-            sync_dialog.title("Sync Subtitle")
-            sync_dialog.geometry("400x250")
-            sync_dialog.transient(self.root)
-            sync_dialog.grab_set()
-
-            ttk.Label(sync_dialog, text="Current timestamp:",
-                     font=("Arial", 10, "bold")).pack(pady=(20, 5))
-            ttk.Label(sync_dialog, text=current_start,
-                     font=("Courier", 12)).pack(pady=(0, 20))
-
-            ttk.Label(sync_dialog, text="Enter desired timestamp (HH:MM:SS,mmm):",
-                     font=("Arial", 10, "bold")).pack(pady=(0, 5))
+            # Create modern sync dialog
+            self.show_sync_dialog(current_start)
 
-            timestamp_entry = ttk.Entry(sync_dialog, width=20, font=("Courier", 12))
-            timestamp_entry.pack(pady=(0, 20))
-            timestamp_entry.insert(0, current_start)
-            timestamp_entry.focus()
+        except Exception as e:
+            self.show_error("Error", f"An error occurred:\n{str(e)}")
 
-            result = {"confirmed": False, "new_timestamp": None}
+        self.content_text.config(state=tk.DISABLED)
 
-            def on_confirm():
-                new_timestamp = timestamp_entry.get().strip()
-                # Validate timestamp format
-                if not re.match(r'^\d{2}:\d{2}:\d{2},\d{3}$', new_timestamp):
-                    messagebox.showerror("Invalid Format",
-                        "Please use format: HH:MM:SS,mmm\nExample: 00:00:12,500")
-                    return
-                result["confirmed"] = True
-                result["new_timestamp"] = new_timestamp
-                sync_dialog.destroy()
+    def show_sync_dialog(self, current_timestamp):
+        """Show modern sync dialog"""
+        dialog = tk.Toplevel(self.root)
+        dialog.title("Sync Subtitle")
+        dialog.geometry("420x340")
+        dialog.configure(bg=Colors.BG_DARK)
+        dialog.transient(self.root)
+        dialog.grab_set()
+
+        # Center dialog
+        dialog.update_idletasks()
+        x = (dialog.winfo_screenwidth() - 420) // 2
+        y = (dialog.winfo_screenheight() - 340) // 2
+        dialog.geometry(f"+{x}+{y}")
+
+        # Content
+        content = tk.Frame(dialog, bg=Colors.BG_DARK)
+        content.pack(fill=tk.BOTH, expand=True, padx=24, pady=24)
+
+        tk.Label(content, text="Sync Timestamp", font=("SF Pro Display", 16, "bold"),
+                bg=Colors.BG_DARK, fg=Colors.TEXT_BRIGHT).pack(anchor=tk.W, pady=(0, 16))
+
+        # Current timestamp
+        current_frame = tk.Frame(content, bg=Colors.BG_LIGHT, padx=16, pady=12)
+        current_frame.pack(fill=tk.X, pady=(0, 16))
+
+        tk.Label(current_frame, text="Current:", font=("SF Pro Display", 10),
+                bg=Colors.BG_LIGHT, fg=Colors.TEXT_SECONDARY).pack(anchor=tk.W)
+        tk.Label(current_frame, text=current_timestamp, font=("SF Mono", 14),
+                bg=Colors.BG_LIGHT, fg=Colors.TIMESTAMP_FG).pack(anchor=tk.W, pady=(4, 0))
+
+        # New timestamp
+        tk.Label(content, text="New timestamp (HH:MM:SS,mmm):",
+                font=("SF Pro Display", 10), bg=Colors.BG_DARK,
+                fg=Colors.TEXT_SECONDARY).pack(anchor=tk.W, pady=(0, 6))
+
+        entry_frame = tk.Frame(content, bg=Colors.BG_LIGHT,
+                              highlightbackground=Colors.BORDER, highlightthickness=1)
+        entry_frame.pack(fill=tk.X)
+
+        timestamp_entry = tk.Entry(entry_frame, font=("SF Mono", 14), bg=Colors.BG_LIGHT,
+                                  fg=Colors.TEXT_PRIMARY, relief=tk.FLAT,
+                                  insertbackground=Colors.TEXT_PRIMARY)
+        timestamp_entry.pack(fill=tk.X, padx=12, pady=10)
+        timestamp_entry.insert(0, current_timestamp)
+        timestamp_entry.focus()
+        timestamp_entry.select_range(0, tk.END)
+
+        result = {"confirmed": False, "new_timestamp": None}
+
+        def on_confirm():
+            new_timestamp = timestamp_entry.get().strip()
+            if not re.match(r'^\d{2}:\d{2}:\d{2},\d{3}$', new_timestamp):
+                self.show_error("Invalid Format",
+                    "Please use format: HH:MM:SS,mmm\nExample: 00:00:12,500")
+                return
+            result["confirmed"] = True
+            result["new_timestamp"] = new_timestamp
+            dialog.destroy()
 
-            def on_cancel():
-                sync_dialog.destroy()
+        def on_cancel():
+            dialog.destroy()
 
-            button_frame = ttk.Frame(sync_dialog)
-            button_frame.pack(pady=10)
+        # Buttons
+        btn_frame = tk.Frame(content, bg=Colors.BG_DARK)
+        btn_frame.pack(fill=tk.X, pady=(20, 0))
 
-            ttk.Button(button_frame, text="Apply", command=on_confirm).pack(side=tk.LEFT, padx=5)
-            ttk.Button(button_frame, text="Cancel", command=on_cancel).pack(side=tk.LEFT, padx=5)
+        cancel_btn = ModernButton(btn_frame, text="Cancel", command=on_cancel,
+                                 width=100, style="secondary")
+        cancel_btn.pack(side=tk.RIGHT, padx=(8, 0))
 
-            # Bind Enter key to confirm
-            timestamp_entry.bind('<Return>', lambda e: on_confirm())
+        apply_btn = ModernButton(btn_frame, text="Calculate", command=on_confirm,
+                                width=100, style="primary")
+        apply_btn.pack(side=tk.RIGHT)
 
-            # Wait for dialog to close
-            self.root.wait_window(sync_dialog)
+        timestamp_entry.bind('<Return>', lambda e: on_confirm())
+        timestamp_entry.bind('<Escape>', lambda e: on_cancel())
 
-            if not result["confirmed"]:
-                return
+        self.root.wait_window(dialog)
 
-            # Calculate the shift needed
-            current_td = self.parse_timestamp(current_start)
-            new_td = self.parse_timestamp(result["new_timestamp"])
-            shift_delta = new_td - current_td
-
-            # Update the UI with calculated shift
-            total_seconds = abs(shift_delta.total_seconds())
-            hours = int(total_seconds // 3600)
-            minutes = int((total_seconds % 3600) // 60)
-            seconds = int(total_seconds % 60)
-            milliseconds = int((shift_delta.microseconds // 1000) if shift_delta.total_seconds() >= 0
-                              else (1000 - (shift_delta.microseconds // 1000)) % 1000)
-
-            if shift_delta.total_seconds() < 0:
-                self.direction_var.set("-")
-            else:
-                self.direction_var.set("+")
-
-            self.hours_var.set(str(hours))
-            self.minutes_var.set(str(minutes))
-            self.seconds_var.set(str(seconds))
-            self.milliseconds_var.set(str(milliseconds))
-
-            # Show confirmation
-            shift_str = f"{'−' if shift_delta.total_seconds() < 0 else '+'}{hours:02d}:{minutes:02d}:{seconds:02d}.{milliseconds:03d}"
-            msg = f"Shift calculated!\n\n"
-            msg += f"From: {current_start}\n"
-            msg += f"To:   {result['new_timestamp']}\n"
-            msg += f"Shift: {shift_str}\n\n"
-            msg += "Click 'Apply Shift' to preview, then 'Save File' to save."
-
-            messagebox.showinfo("Sync Ready", msg)
+        if not result["confirmed"]:
+            return
 
-        except Exception as e:
-            messagebox.showerror("Error", f"An error occurred:\n{str(e)}")
+        # Calculate shift
+        current_td = self.parse_timestamp(current_timestamp)
+        new_td = self.parse_timestamp(result["new_timestamp"])
+        shift_delta = new_td - current_td
+
+        # Update UI with calculated shift
+        total_seconds = abs(shift_delta.total_seconds())
+        hours = int(total_seconds // 3600)
+        minutes = int((total_seconds % 3600) // 60)
+        seconds = int(total_seconds % 60)
+        milliseconds = int((shift_delta.microseconds // 1000) if shift_delta.total_seconds() >= 0
+                          else (1000 - (shift_delta.microseconds // 1000)) % 1000)
+
+        if shift_delta.total_seconds() < 0:
+            self.set_direction("-")
+        else:
+            self.set_direction("+")
+
+        self.hours_var.set(str(hours))
+        self.minutes_var.set(str(minutes))
+        self.seconds_var.set(str(seconds))
+        self.milliseconds_var.set(str(milliseconds))
+
+        # Update status
+        sign = '+' if shift_delta.total_seconds() >= 0 else '−'
+        self.status_bar.set_status(
+            f"Shift calculated: {sign}{hours:02d}:{minutes:02d}:{seconds:02d}.{milliseconds:03d}",
+            "success"
+        )
 
     def parse_timestamp(self, timestamp):
         """Parse SRT timestamp to timedelta object"""
-        # Format: 00:00:10,500
         time_part, ms_part = timestamp.split(',')
         h, m, s = map(int, time_part.split(':'))
         ms = int(ms_part)
@@ -325,7 +1055,6 @@ def shift_timestamp(self, timestamp, shift_delta):
         td = self.parse_timestamp(timestamp)
         new_td = td + shift_delta
 
-        # Handle negative times (set to 00:00:00,000)
         if new_td.total_seconds() < 0:
             new_td = timedelta(0)
 
@@ -334,10 +1063,13 @@ def shift_timestamp(self, timestamp, shift_delta):
     def preview_shift(self):
         """Apply shift and preview the result"""
         if not self.file_path:
-            messagebox.showerror("Error", "Please select an SRT file first.")
+            self.show_error("Error", "Please select an SRT file first.")
             return
 
         try:
+            self.status_bar.set_status("Applying time shift...", "working")
+            self.root.update()
+
             # Get shift values
             hours = int(self.hours_var.get())
             minutes = int(self.minutes_var.get())
@@ -349,7 +1081,6 @@ def preview_shift(self):
             shift_delta = timedelta(hours=hours, minutes=minutes,
                                    seconds=seconds, milliseconds=milliseconds)
 
-            # Apply direction
             if direction == "-":
                 shift_delta = -shift_delta
 
@@ -357,7 +1088,7 @@ def preview_shift(self):
             with open(self.file_path, 'r', encoding='utf-8') as f:
                 content = f.read()
 
-            # Pattern to match timestamps: 00:00:10,500 --> 00:00:13,000
+            # Pattern to match timestamps
             timestamp_pattern = r'(\d{2}:\d{2}:\d{2},\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2},\d{3})'
 
             def replace_timestamps(match):
@@ -370,34 +1101,53 @@ def replace_timestamps(match):
             # Replace all timestamps
             self.shifted_content = re.sub(timestamp_pattern, replace_timestamps, content)
 
-            # Update the display with shifted content
+            # Update the display
             self.content_text.config(state=tk.NORMAL)
             self.content_text.delete("1.0", tk.END)
             self.content_text.insert("1.0", self.shifted_content)
+            self.highlight_syntax()
             self.content_text.config(state=tk.DISABLED)
+            self.update_line_numbers()
 
-            # Enable save button
+            # Enable buttons
             self.save_btn.config(state=tk.NORMAL)
+            self.reset_btn.config(state=tk.NORMAL)
 
+            # Update status
             shift_str = f"{direction}{hours:02d}:{minutes:02d}:{seconds:02d}.{milliseconds:03d}"
-            messagebox.showinfo("Shift Applied",
-                              f"Time shift applied: {shift_str}\n\nReview the changes in the preview, then click 'Save File' to save.")
+            self.status_bar.set_status(f"Shift applied: {shift_str}", "success")
 
         except Exception as e:
-            messagebox.showerror("Error", f"An error occurred:\n{str(e)}")
+            self.show_error("Error", f"An error occurred:\n{str(e)}")
+            self.status_bar.set_status("Shift failed", "error")
+
+    def reset_preview(self):
+        """Reset to original content"""
+        if self.original_content:
+            self.content_text.config(state=tk.NORMAL)
+            self.content_text.delete("1.0", tk.END)
+            self.content_text.insert("1.0", self.original_content)
+            self.highlight_syntax()
+            self.content_text.config(state=tk.DISABLED)
+            self.update_line_numbers()
+
+            self.shifted_content = None
+            self.save_btn.config(state=tk.DISABLED)
+            self.reset_btn.config(state=tk.DISABLED)
+
+            self.status_bar.set_status("Preview reset to original", "info")
 
     def save_file(self):
         """Save the shifted content to a file"""
         if not self.shifted_content:
-            messagebox.showerror("Error", "No shifted content to save. Click 'Apply Shift' first.")
+            self.show_error("Error", "No shifted content to save. Click 'Apply Shift' first.")
             return
 
         try:
-            # Ask where to save
             save_path = filedialog.asksaveasfilename(
                 title="Save Shifted SRT File",
                 defaultextension=".srt",
-                initialfile=os.path.basename(self.file_path).replace('.srt', '_shifted.srt'),
+                initialfile=os.path.basename(self.file_path).replace('.srt', '_synced.srt'),
                 filetypes=[("SRT files", "*.srt"), ("All files", "*.*")]
             )
 
@@ -405,15 +1155,35 @@ def save_file(self):
                 with open(save_path, 'w', encoding='utf-8') as f:
                     f.write(self.shifted_content)
 
-                messagebox.showinfo("Success",
-                                  f"File saved successfully!\n\nSaved to: {os.path.basename(save_path)}")
+                self.status_bar.set_status(f"Saved: {os.path.basename(save_path)}", "success")
+                self.show_success("Success", f"File saved successfully!\n\n{os.path.basename(save_path)}")
 
         except Exception as e:
-            messagebox.showerror("Error", f"An error occurred:\n{str(e)}")
+            self.show_error("Error", f"An error occurred:\n{str(e)}")
+
+    def show_error(self, title, message):
+        """Show error dialog"""
+        messagebox.showerror(title, message)
+        self.status_bar.set_status("Error occurred", "error")
+
+    def show_warning(self, title, message):
+        """Show warning dialog"""
+        messagebox.showwarning(title, message)
+
+    def show_success(self, title, message):
+        """Show success dialog"""
+        messagebox.showinfo(title, message)
 
 
 def main():
     root = tk.Tk()
+
+    # Set app icon (if available)
+    try:
+        root.iconbitmap('')  # Would set icon if we had one
+    except:
+        pass
+
     app = SRTShifter(root)
     root.mainloop()