/* Full path: /demo/demo.css
   Purpose: Demo tab inner window — match the program screenshot (Qt-like look).
   Requirements:
   - No scrollbars inside the demo window (fits fully).
   - Mobile-first, responsive, sharp borders, subtle rounding like the screenshot.
*/

:root{
  --ge-bg:#f0f0f0;
  --ge-window:#f6f6f6;

  --ge-border:#d8d8d8;
  --ge-border-2:#e2e2e2;

  --ge-titlebar-top:#f7f7f7;
  --ge-titlebar-bot:#eeeeee;

  --ge-tabsbar:#f3f3f3;
  --ge-tab:#e9e9e9;
  --ge-tab-border:#cfcfcf;
  --ge-tab-active:#ffffff;

  --ge-panel:#ffffff;

  --ge-text:#111;
  --ge-muted:#666;

  --ge-shadow:0 10px 30px rgba(0,0,0,.10);

  --ge-radius:10px;
  --ge-panel-radius:8px;

  --ge-btn-bg:#fafafa;
  --ge-btn-border:#dcdcdc;
  --ge-btn-shadow:0 1px 2px rgba(0,0,0,.06);

  --ge-safe-pad:12px; /* outer “window-in-page” margin */
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:transparent; /* this file only styles the inner demo */
  color:var(--ge-text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }
a:active{ opacity:.92; }

:focus-visible{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}

.ge-demo-root{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  padding:var(--ge-safe-pad);
}

/* This is the “program window” drawn inside the Demo tab */
.ge-demo-window{
  width:100%;
  max-width:1100px;
  height:100%;
  min-height:0;
  margin:0 auto;

  background:var(--ge-window);
  border:1px solid var(--ge-border);
  border-radius:var(--ge-radius);
  box-shadow:var(--ge-shadow);

  display:flex;
  flex-direction:column;

  overflow:hidden; /* critical: prevents inner scrollbars */
  position:relative; /* toast */
}

/* Titlebar (fake) */
.ge-demo-titlebar{
  height:34px;
  background:linear-gradient(var(--ge-titlebar-top), var(--ge-titlebar-bot));
  border-bottom:1px solid var(--ge-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
}

.ge-demo-titleleft{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.ge-demo-appicon{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
}

.ge-demo-title{
  font-size:.92rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ge-demo-winbtns{
  display:flex;
  gap:8px;
  opacity:.6;
}

.ge-demo-winbtn{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid #bdbdbd;
  background:#f7f7f7;
}

.ge-demo-min{ }
.ge-demo-max{ }
.ge-demo-close{ }

/* Tabs bar */
.ge-demo-tabsbar{
  background:var(--ge-tabsbar);
  border-bottom:1px solid var(--ge-border);
  padding:6px 10px 0;
  display:flex;
  gap:6px;
}

.ge-demo-tab{
  appearance:none;
  border:1px solid var(--ge-tab-border);
  border-bottom:none;
  background:var(--ge-tab);
  padding:6px 14px;
  font-size:.88rem;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  cursor:default;
  user-select:none;
}

.ge-demo-tab.is-active{
  background:var(--ge-tab-active);
  position:relative;
  top:1px;
  font-weight:600;
}

.ge-demo-tab:disabled{
  opacity:1;
  color:inherit;
}

/* Client area (the big white rectangle in screenshot) */
.ge-demo-client{
  flex:1;
  min-height:0;
  padding:10px;
  display:flex;
}

.ge-demo-panel{
  flex:1;
  min-height:0;
  background:var(--ge-panel);
  border:1px solid var(--ge-border);
  border-radius:var(--ge-panel-radius);
  padding:16px;

  display:flex;
  align-items:stretch;
  justify-content:center;

  overflow:hidden; /* avoid any inner scrollbars */
}

/* Center content like screenshot */
.ge-demo-center{
  flex:1;
  min-height:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding-top:clamp(32px, 10vh, 74px);
  gap:28px;
}

.ge-demo-openbtn{
  appearance:none;
  border:1px solid var(--ge-btn-border);
  background:var(--ge-btn-bg);
  box-shadow:var(--ge-btn-shadow);

  width:min(420px, 92vw);
  height:64px;

  border-radius:8px;
  font-size:1rem;
  font-weight:600;

  cursor:pointer;
}

.ge-demo-openbtn:active{
  transform:translateY(1px);
}

.ge-demo-brand{
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:.02em;
  text-align:center;
}

.ge-demo-brandlink{
  text-decoration:none;
}
.ge-demo-brandlink:hover{
  text-decoration:underline;
}

/* Bottom strip like screenshot */
.ge-demo-bottom{
  background:var(--ge-bg);
  border-top:1px solid var(--ge-border);
  padding:10px;
  text-align:center;
  font-size:.85rem;
}

.ge-demo-bottomlink{
  text-decoration:underline;
}

/* Tiny toast for “placeholder action” */
.ge-demo-toast{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:#fff;
  border:1px solid var(--ge-border);
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  font-size:.9rem;
  max-width:min(560px, 92vw);
}

/* --- Export tab layout (match real app screenshot) --- */
.ge-tabpage{
  width:100%;
  height:100%;
  min-height:0;
}

.ge-export-form{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ge-export-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.ge-export-label{
  font-size:.92rem;
  color:var(--ge-text);
  white-space:nowrap;
}

.ge-export-input{
  flex:1;
  min-width:0;
  height:28px;
  border:1px solid var(--ge-border);
  border-radius:4px;
  padding:0 10px;
  background:#fff;
  font-size:.92rem;
}

.ge-export-actions{
  display:flex;
  align-items:center;
}

.ge-export-btn{
  appearance:none;
  border:1px solid var(--ge-btn-border);
  background:var(--ge-btn-bg);
  box-shadow:var(--ge-btn-shadow);
  height:28px;
  padding:0 12px;
  border-radius:6px;
  font-size:.92rem;
  cursor:pointer;
}

.ge-export-btn:active{ transform:translateY(1px); }

.ge-export-btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

.ge-export-btn-primary{
  min-width:110px;
}

.ge-export-bigbox{
  flex:1;
  min-height:0;
  border:1px solid var(--ge-border-2);
  border-radius:4px;
  background:#fff;
}

/* --- Modal: Choose ZIP (demo) --- */
.ge-modal{
  position:absolute;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.ge-modal[hidden]{ display:none; }

.ge-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.18);
}

.ge-modal-card{
  position:relative;
  width:min(520px, 92vw);
  background:#fff;
  border:1px solid var(--ge-border);
  border-radius:10px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  overflow:hidden;
}

.ge-modal-head{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  background:linear-gradient(var(--ge-titlebar-top), var(--ge-titlebar-bot));
  border-bottom:1px solid var(--ge-border);
}

.ge-modal-title{
  font-size:.92rem;
  font-weight:600;
}

.ge-modal-x{
  appearance:none;
  border:1px solid var(--ge-border);
  background:#fff;
  width:28px;
  height:24px;
  border-radius:6px;
  cursor:pointer;
  line-height:1;
}

.ge-modal-body{
  padding:12px;
}

.ge-filelist{
  border:1px solid var(--ge-border);
  border-radius:8px;
  overflow:hidden;
}

.ge-fileitem{
  width:100%;
  text-align:left;
  padding:10px 12px;
  background:#fff;
  border:0;
  cursor:pointer;
  font-size:.92rem;
}

.ge-fileitem:hover{ background:#f6f6f6; }

.ge-fileitem.is-selected{
  background:#eaf2ff;
  outline:2px solid rgba(0,0,0,.15);
  outline-offset:-2px;
}

.ge-modal-hint{
  margin-top:10px;
  font-size:.84rem;
  color:var(--ge-muted);
}

.ge-modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--ge-border);
  background:#fafafa;
}

.ge-modal-btn{
  appearance:none;
  border:1px solid var(--ge-btn-border);
  background:var(--ge-btn-bg);
  box-shadow:var(--ge-btn-shadow);
  height:28px;
  padding:0 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:.92rem;
}

.ge-modal-btn:active{ transform:translateY(1px); }

.ge-modal-btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

.ge-modal-btn-primary{
  min-width:86px;
}

/* --- Export output log (inside big white box) --- */
.ge-export-bigbox{
  overflow:hidden;
}

.ge-log{
  height:100%;
  overflow:auto;
  padding:10px 12px;
  font-size:.92rem;
  line-height:1.55;
}

.ge-log-sep{
  height:1px;
  background:#000;
  opacity:.35;
  margin:6px 0 10px 0;
}

.ge-log-line{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.ge-log-ico{
  width:18px;
  flex:0 0 18px;
  text-align:center;
  opacity:.95;
}

.ge-log-text{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mobile refinement: reduce outer padding slightly */
@media (max-width: 420px){
  :root{ --ge-safe-pad:10px; }
  .ge-demo-titlebar{ padding:0 8px; }
  .ge-demo-tabsbar{ padding:6px 8px 0; }
  .ge-demo-client{ padding:8px; }
  .ge-demo-panel{ padding:12px; }
  .ge-demo-center{ gap:22px; }
}