HTMLify

:root { --primary: #2563eb; --bg: #f8fafc; --sidebar: #ffffff; --border: #e2e8f0; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg); color: #1e293b; } .navbar { height: 60px; display: flex; align-items: center; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); justify-content: space-between; } .app-container { display: grid; grid-template-columns: 200px 1fr 250px; height: calc(100vh - 60px); } .sidebar, .properties-panel { background: var(--sidebar); border-right: 1px solid var(--border); padding: 20px; } .canvas-area { display: flex; align-items: center; justify-content: center; background: #e2e8f0; position: relative; overflow: auto; } .toolbar { position: absolute; top: 10px; left: 10px; background: #fff; padding: 10px; border-radius: 8px; display: flex; gap: 5px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .tool-btn { padding: 8px 12px; border: 1px solid var(--border); background: #fff; cursor: pointer; border-radius: 4px; } .tool-btn.active { background: var(--primary); color: white; }

/* Karbon Sites Branding */

  #karbon-promo-banner {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      z-index: 10000;
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s ease-in-out;
  }
  #karbon-promo-banner:hover {
      transform: scale(1.05);
  }