:root { 
        --bg: #F4F4F4; 
        --text: #111111; 
        --gray: #888888;
        --border-width: 1px;
        --border-color: #111111;
        --border: var(--border-width) solid var(--border-color); 
        --hover-bg: #111111;
        --hover-text: #F4F4F4;
        --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        --font-typewriter: 'Courier New', Courier, 'Lucida Sans Typewriter', monospace;
        --font-logo: 'BankGothic Lt BT', 'Bank Gothic', 'Century Gothic', sans-serif;
      }
      :root[data-theme="dark"] {
        --bg: #1C1C1C; 
        --text: #F4F4F4; 
        --gray: #A0A0A0;
        --border-color: #555555;
        --border: var(--border-width) solid var(--border-color); 
        --hover-bg: #F4F4F4;
        --hover-text: #1C1C1C;
      }

      * { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important; }
      
      html, body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; position: relative; }

      body { 
        font-family: var(--font-sans); background: var(--bg); color: var(--text); 
        line-height: 1.5; text-transform: uppercase; 
        transition: background 0.3s ease, color 0.3s ease;
      }
      body.fade-out { opacity: 0; transition: opacity 0.4s ease; }

      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: none; }
      }
      
      .container { 
        width: 100%; max-width: none; padding: 0; min-height: 100vh; display: flex; flex-direction: column; 
        opacity: 0; animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      
      header { padding: 2rem; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; position: relative; flex-wrap: wrap; gap: 1.5rem; }
      main { padding: 2rem; flex: 1; width: 100%; }

      h1 { font-size: 2.5rem; font-weight: 500; letter-spacing: -1px; line-height: 1; display: inline-flex; align-items: baseline; }
      h1 a { font-family: var(--font-logo); color: inherit; border-bottom: none !important; display: inline-flex; align-items: baseline; }
      h1 a:hover { border-bottom: none !important; }
      .portfolio-tag { font-family: 'Bookman Old Style', Bookman, Georgia, serif; font-style: italic; font-size: 1.2rem; font-weight: normal; text-transform: lowercase; margin-left: 0.6rem; transform: translateY(0.25em); color: var(--gray); }
      
      h2 { font-size: 1.5rem; font-weight: 500; }
      a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.2s; cursor: pointer; }
      a:hover { border-bottom: 1px solid var(--text); }
      img { max-width: 100%; height: auto; display: block; }

      /* BUTTONS & FORMS */
      button, .btn { padding: 0.8rem 1.5rem; border: var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-size: 0.85rem; font-family: var(--font-mono); text-transform: uppercase; transition: all 0.2s ease; }
      button:hover, .btn:hover, button.invert { background: var(--text); color: var(--bg); }
      button.danger { border-color: #ff3333; color: #ff3333; }
      button.danger:hover { background: #ff3333; color: #fff; border-color: #ff3333; }

      input, textarea, select { 
        width: 100%; padding: 1rem; border: var(--border); background: transparent; 
        color: var(--text); font-family: var(--font-mono); font-size: 0.9rem; outline: none; transition: border-color 0.2s;
      }
      textarea.typewriter-input { font-family: var(--font-typewriter); font-size: 1.1rem; line-height: 1.6; text-transform: none; }
      select option { background: var(--bg); color: var(--text); }
      input:focus, textarea:focus, select:focus { border-color: var(--text); background: rgba(128,128,128,0.05); }
      label { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--gray); margin-bottom: 0.5rem; margin-top: 1rem;}

      /* NAVIGATION & MOBILE MENU */
      .mobile-menu-btn { display: none; background: transparent; border: var(--border); color: var(--text); padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: 1.2rem; cursor: pointer; }
      .nav-links { display: flex; gap: 1rem; flex-wrap: wrap; }

      /* FULL BLEED DIVIDER */
      .full-bleed-divider { position: relative; border-bottom: none !important; }
      .full-bleed-divider::after {
        content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
        width: 100vw; height: var(--border-width); background-color: var(--border-color);
        pointer-events: none; z-index: 10;
      }

      /* INDEX WORKS GRID */
      .works-grid { 
        display: flex; flex-wrap: wrap; 
        border-top: var(--border); 
        max-width: 1400px; margin: 0 auto; 
      }
      .work-item { 
        position: relative; width: 50%; aspect-ratio: 1/1; 
        background: var(--bg); overflow: hidden; display: block; 
        border-bottom: var(--border); border-right: var(--border); 
      }
      .work-item:nth-child(2n) { border-right: none; }

      .work-img-wrapper { width: 100%; height: 100%; }
      .work-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); opacity: 0.9; transition: transform 0.8s ease, filter 0.5s ease; }
      .work-item:hover img { transform: scale(1.05); filter: grayscale(0%); opacity: 1; }
      
      .work-meta { 
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; 
        background: transparent;
        opacity: 0; transition: opacity 0.3s ease; 
        z-index: 2; padding: 2rem; text-align: center; pointer-events: none;
      }
      .work-item:hover .work-meta { opacity: 1; }
      .work-meta h2 { font-size: 1.5rem; font-weight: 500; margin: 0; background: var(--bg); color: var(--text); padding: 0.8rem 1.5rem; }

      /* PURE CSS WAVY LINE */
      .wavy-line {
        height: 10px; width: 100%;
        background:
          radial-gradient(circle at 10px 10px, transparent 8px, var(--border-color) 8.5px, var(--border-color) 9.5px, transparent 10px) 0 -10px,
          radial-gradient(circle at 10px 0px, transparent 8px, var(--border-color) 8.5px, var(--border-color) 9.5px, transparent 10px) 10px 10px;
        background-size: 20px 20px;
        background-repeat: repeat-x;
      }

      /* ALIGNMENT UTILITIES */
      .align-left { align-items: flex-start; text-align: left; }
      .align-center { align-items: center; text-align: center; }
      .align-right { align-items: flex-end; text-align: right; }

      /* RENDERED BLOCKS */
      .render-container { display: flex; flex-wrap: wrap; gap: 2rem 1rem; margin-top: 1rem; text-transform: none; align-items: stretch; justify-content: center; width: 100%; }
      .block-full { width: 100%; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; justify-content: center; }
      .block-half { width: calc(50% - 0.5rem); display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; justify-content: center; }
      
      .block-render-text { font-family: var(--font-typewriter); font-size: 1.15rem; line-height: 1.8; color: var(--text); white-space: pre-wrap; width: 100%; max-width: 900px; }
      .block-render-text a { text-decoration: underline; color: inherit; }
      .block-render-text a:hover { color: var(--gray); border-bottom: none; }
      
      .block-render-heading { 
        font-size: 2rem; font-weight: 500; margin-bottom: 0.5rem; text-transform: uppercase; 
        padding-bottom: 1rem; width: 100%; position: relative; border-bottom: none;
      }
      .block-render-heading::after {
        content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
        width: 100vw; height: var(--border-width); background-color: var(--border-color);
        pointer-events: none;
      }
      
      .block-render-media img, .block-render-media video { max-width: 100%; height: auto; border: var(--border); display: block; cursor: zoom-in; }
      .block-render-pdf iframe { width: 100%; height: 80vh; border: var(--border); }
      .block-render-link-btn { display: inline-block; padding: 1rem 2rem; border: var(--border); font-family: var(--font-mono); font-weight: bold; background: var(--text); color: var(--bg); cursor: pointer; text-align: center; }

      /* ADMIN INLINE EDITING */
      [contenteditable="true"] { outline: none; cursor: text; min-height: 1.5em; transition: background 0.2s; }
      [contenteditable="true"]:hover { background: rgba(128,128,128,0.03); }
      [contenteditable="true"]:empty:before { content: attr(data-placeholder); color: var(--gray); pointer-events: none; display: block; }

      /* ADMIN RESIZER & DRAG LOGIC */
      .canvas-block { position: relative; transition: outline 0.2s; cursor: grab; padding: 0.5rem; border: 1px dashed transparent; display: flex; flex-direction: column; }
      .canvas-block:active { cursor: grabbing; }
      .canvas-block:hover { border-color: var(--gray); background: rgba(128,128,128,0.02); }
      
      .canvas-block.drag-swap { outline: 2px solid var(--text); background: rgba(128,128,128,0.05); }
      .canvas-block.drag-left { box-shadow: inset 80px 0 0 rgba(128,128,128,0.1); outline: 2px solid var(--text); border-left: 4px solid var(--text); }
      .canvas-block.drag-right { box-shadow: inset -80px 0 0 rgba(128,128,128,0.1); outline: 2px solid var(--text); border-right: 4px solid var(--text); }
      
      .admin-resizer { resize: horizontal; overflow: hidden; display: inline-block; position: relative; padding-bottom: 15px; padding-right: 15px; min-width: 100px; max-width: 100%; }
      .admin-resizer::after { content: '◢'; position: absolute; bottom: 0; right: 0; font-size: 12px; color: var(--text); pointer-events: none; opacity: 0.5; }
      .canvas-empty { width: 100%; text-align: center; padding: 4rem; border: 2px dashed var(--gray); color: var(--gray); font-family: var(--font-mono); }

      /* LIGHTBOX - ABSOLUTE CENTER (FIXED) */
      .lightbox { 
        position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; 
        width: 100vw; height: 100vh; 
        background: rgba(0,0,0,0.95); z-index: 99999; 
        display: flex; align-items: center; justify-content: center; 
        cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; 
      }
      .lightbox.active { opacity: 1; visibility: visible; }
      .lightbox img { max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; display: block; margin: auto; }

      /* ADMIN UI */
      .admin-layout { display: grid; grid-template-columns: 350px 1fr; gap: 2rem; align-items: start; }
      .admin-section { border: var(--border); padding: 1.5rem; background: var(--bg); margin-bottom: 2rem; }
      .admin-section-title { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 1px; color: var(--gray); margin-bottom: 1.5rem; border-bottom: var(--border); padding-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; margin-top:0; }
      .admin-list-item { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border); padding: 1rem 0; gap: 1rem; }
.admin-list-item > div:first-child { flex: 1; min-width: 0; overflow-wrap: break-word; }
      
      /* TOAST BOTTOM RIGHT */
      .sys-toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--text); color: var(--bg); padding: 1rem 2rem; font-family: var(--font-mono); z-index: 10000; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 4px 4px 0 var(--border-color); transform: translateY(20px); }
      .sys-toast.show { opacity: 1; transform: translateY(0); }

      /* CONTEXT MENU */
      .context-menu { position: absolute; background: var(--bg); border: var(--border); padding: 1rem; z-index: 10000; display: none; box-shadow: 8px 8px 0 var(--text); width: 320px; }
      .context-menu label { margin-top: 0.8rem; font-size: 0.7rem; font-weight: bold; }
      .context-menu input, .context-menu textarea, .context-menu select { padding: 0.5rem; font-size: 0.8rem; margin-bottom: 0.2rem; }
      
      @media (max-width: 1024px) {
        .admin-layout { grid-template-columns: 1fr; }
        .block-half { width: 100%; }
        /* Dynamic Image Scaling */
        .work-item { width: 100%; aspect-ratio: auto; border-right: none; }
        .work-item img { aspect-ratio: auto; height: auto; width: 100%; object-fit: contain; }

        /* Mobile Adjustments */
        .mobile-menu-btn { display: block; }
        .nav-links { display: none; position: absolute; top: calc(100% + 1px); right: 0; background: var(--bg); border: var(--border); padding: 1rem; flex-direction: column; z-index: 1000; min-width: 200px; box-shadow: 4px 4px 0 var(--border-color); }
        .nav-links.active { display: flex; }
        .nav-links a, .nav-links button { width: 100%; text-align: left; border-bottom: none !important; margin-bottom: 0.5rem; }
        
        .branding-header-right { display: none !important; }
        .mobile-branding-footer { display: block !important; }
      }