:root{ --bg:#f6f7fb; --fg:#10131a; --panel:#ffffff; --panel-border:#d8deeb; --muted:#5a657a; --canvas-bg:#ffffff; --grid:#e8ecf5; --accent-outline:#2b6eff; --btn-bg:#eef2fb; --btn-bg-hover:#e6ecfa; --chip-bg:#f0f4ff; }
    [data-theme="dark"]{ --bg:#0f1115; --fg:#e6e6e6; --panel:#141822; --panel-border:#23262d; --muted:#9aa5c3; --canvas-bg:#0a0a0a; --grid:#131621; --accent-outline:#5b9dff; --btn-bg:#1d2330; --btn-bg-hover:#20283a; --chip-bg:#121622; }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body { font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--fg); }
    .app-header { display:flex; align-items:center; gap:16px; padding:10px 16px; border-bottom:1px solid var(--panel-border); background: var(--panel); position:sticky; top:0; z-index:10; }
    .toolbar { display:flex; gap:8px; flex-wrap: wrap; }
    .file-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background: var(--btn-bg); border:1px solid var(--panel-border); border-radius:8px; cursor:pointer; }
    .file-btn:hover { background: var(--btn-bg-hover); }
    .file-btn input { display:none; }
    button { background: var(--btn-bg); color: var(--fg); border:1px solid var(--panel-border); border-radius:8px; padding:8px 12px; cursor:pointer; }
    button:hover { background: var(--btn-bg-hover); }
    button.tool-btn { padding:6px 10px; }
    button.active { outline:2px solid var(--accent-outline); }
    .controls { display:flex; gap:16px; align-items:center; padding:8px 16px; border-bottom:1px solid var(--panel-border); flex-wrap:wrap; }
    .tool-group { display:flex; align-items:center; gap:8px; padding:6px 8px; background: var(--chip-bg); border:1px solid var(--panel-border); border-radius:10px; }
    .group-title { color: var(--muted); font-size:0.85rem; margin-right:6px; }
    #stageWrapper { position:relative; width:100%; height: calc(100vh - 180px); overflow:hidden; background: var(--bg); display:flex; align-items:center; justify-content:center; }
    #canvas { background: var(--canvas-bg); box-shadow: 0 0 0 1px var(--panel-border) inset, 0 6px 40px rgba(0,0,0,0.08); border-radius:8px; }
    .hidden { display:none; }
    .app-footer { padding:8px 16px; border-top:1px solid var(--panel-border); color: var(--muted); font-size:0.9rem; }
    .spacer { flex:1; }
    .theme-toggle { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--panel-border); border-radius:8px; background: var(--btn-bg); }
    /* Text editor */
    #textEditor { position:absolute; min-width:120px; max-width:50vw; min-height:28px; color:inherit; border:1px dashed var(--accent-outline); background: rgba(0,0,0,0.06); outline:none; resize:none; z-index:20; padding:4px 6px; line-height:1.2; overflow:hidden; white-space:pre-wrap; word-break:break-word; }
    #textEditor::placeholder { color: var(--muted); }

             body {
              margin: 0;
              font-family: Arial, Helvetica, sans-serif;
            }

            .topnav {
              overflow: hidden;
              background-color: #ffffff;
            }

            .topnav a {
              float: left;
              color: #1a1a1a;
              text-align: center;
              padding: 12px 14px;
              text-decoration: none;
              font-size: 17px;
            }

            .topnav a:hover {
              background-color: #ddd;
              color: black;
            }

            .topnav a.active {
              background-color: #ffffff;
              color: black;
            }
								   
            .topnav-right {
              float: right;
            }

            .imager img {
              border: 1px solid #ddd;
              width: 150px;
              border-radius: 10%;
              margin: 20px;
            }

            .imager img:hover {
              box-shadow: 0 0 2px 1px rgba(151, 161, 165, 0.5);
									   
            }