/* OnlineCode - 移动端优化布局（为扩展预留） */

/* ===== CSS变量 ===== */
:root{
  --bg:#0d1117;
  --bg2:#161b22;
  --bg3:#21262d;
  --bg4:#1c2128;
  --t1:#e6edf3;
  --t2:#8b949e;
  --t3:#484f58;
  --accent:#58a6ff;
  --green:#3fb950;
  --red:#f85149;
  --border:#30363d;
  --header-h:48px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

/* ===== 基础重置 ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  height:100%;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  touch-action:pan-y;
  background:var(--bg);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Noto Sans SC','PingFang SC',sans-serif;
  color:var(--t1);
  font-size:15px;
}

/* ===== 主容器 - 全屏固定 ===== */
#app{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  /* 预留左右侧边栏空间（未来扩展） */
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
}

/* ===== 顶栏 ===== */
.topbar{
  flex-shrink:0;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  padding-top:var(--safe-t);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  z-index:100;
}

.topbar-brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.logo-icon{
  width:22px;
  height:22px;
  color:var(--accent);
  flex-shrink:0;
}

.logo-text{
  font-size:16px;
  font-weight:600;
  color:var(--t1);
  letter-spacing:-0.3px;
}

@media (max-width:360px){
  .logo-text{display:none}
}

/* 语言选择器 - 自定义样式 */
.topbar-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.lang-picker{
  appearance:none;
  -webkit-appearance:none;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:20px;
  color:var(--t1);
  font-size:13px;
  font-weight:500;
  padding:5px 28px 5px 14px;
  min-width:100px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2358a6ff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

.lang-picker:focus{
  outline:none;
  border-color:var(--accent);
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:4px;
}

.tb-btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  color:var(--t2);
  cursor:pointer;
  border-radius:10px;
  transition:all .15s;
}

.tb-btn:active{
  background:var(--bg3);
  color:var(--t1);
}

.tb-btn.active{
  color:var(--accent);
  background:rgba(88,166,255,.1);
}

.tb-btn svg{width:20px;height:20px}

/* ===== 主工作区 - 上下分栏（可拖拽） ===== */
.workspace{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

/* 编辑器区 */
.editor-wrap{
  flex:1;
  position:relative;
  overflow:hidden;
  min-height:30%;
}

#code-editor{
  position:absolute;
  inset:0;
  padding:12px;
  background:var(--bg);
  border:none;
  color:var(--t1);
  font-family:'SF Mono','Cascadia Code','Fira Code',Menlo,Consolas,monospace;
  font-size:14px;
  line-height:1.6;
  resize:none;
  outline:none;
  -webkit-overflow-scrolling:touch;
}

#code-editor::placeholder{color:var(--t3)}

/* 拖拽分割线 */
.resizer{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  cursor:row-resize;
  touch-action:none;
  user-select:none;
  z-index:10;
}

.resizer-handle{
  width:36px;
  height:4px;
  border-radius:2px;
  background:var(--t3);
  opacity:.5;
}

.resizer:active .resizer-handle{
  opacity:1;
  background:var(--accent);
}

.resizer.dragging{
  background:var(--bg3);
}

.resizer.dragging .resizer-handle{
  opacity:1;
  background:var(--accent);
}

/* 输出区 */
.output-wrap{
  height:35%;
  min-height:120px;
  display:flex;
  flex-direction:column;
  background:var(--bg2);
  overflow:hidden;
}

.output-wrap.collapsed{
  height:0;
  min-height:0;
}

.output-header{
  flex-shrink:0;
  height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-bottom:1px solid var(--border);
}

.output-header>span{
  font-size:13px;
  font-weight:600;
  color:var(--t2);
  text-transform:uppercase;
  letter-spacing:.5px;
}

.output-tabs{
  flex:1;
  display:flex;
  gap:4px;
  overflow-x:auto;
}

.otab{
  padding:0 12px;
  height:28px;
  background:none;
  border:none;
  color:var(--t2);
  font-size:13px;
  cursor:pointer;
  border-radius:14px;
  white-space:nowrap;
}

.otab.active{
  background:var(--accent);
  color:#fff;
}

.otab-close{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  color:var(--t2);
  font-size:20px;
  cursor:pointer;
  border-radius:8px;
}

.otab-close:active{background:var(--bg3)}

.output-body{
  flex:1;
  overflow:hidden;
  position:relative;
}

.opanel{display:none;height:100%;overflow:hidden}
.opanel.active{display:flex;flex-direction:column}

.console{
  flex:1;
  padding:10px 12px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  font-family:'SF Mono',Menlo,monospace;
  font-size:13px;
  line-height:1.5;
}

.console-line{padding:1px 0;word-break:break-all}
.c-info{color:var(--t3)}
.c-out{color:var(--t1)}
.c-err{color:var(--red)}
.c-warn{color:#f0883e}

#graphics-canvas,#canvas-3d{
  flex:1;
  width:100%;
  background:var(--bg);
}

/* ===== 浮动按钮 ===== */
.fab{
  position:fixed;
  right:16px;
  bottom:calc(16px + var(--safe-b));
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--green);
  border:none;
  color:#fff;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(63,185,80,.4);
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s;
}

.fab:active{transform:scale(.92)}
.fab svg{width:26px;height:26px;margin-left:2px}

.fab-stop{
  background:var(--red);
  box-shadow:0 4px 16px rgba(248,81,73,.4);
}

/* 状态提示 */
.run-toast{
  position:fixed;
  left:16px;
  bottom:calc(20px + var(--safe-b));
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  background:var(--bg4);
  border:1px solid var(--border);
  border-radius:20px;
  z-index:50;
  font-size:12px;
  color:var(--t2);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}

.run-toast.show{opacity:1}

.toast-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}

.toast-dot.run{
  background:#f0883e;
  animation:pulse 1s infinite;
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ===== 遮罩和面板 ===== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:200;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s,visibility .2s;
}

.overlay.show{
  opacity:1;
  visibility:visible;
}

/* 菜单面板 - 从右侧滑出 */
.menu-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(300px,85vw);
  background:var(--bg2);
  z-index:210;
  transform:translateX(100%);
  transition:transform .25s ease-out;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:var(--safe-t);
  padding-bottom:var(--safe-b);
}

.menu-panel.open{transform:translateX(0)}

.menu-section{
  padding:8px 0;
  border-bottom:1px solid var(--border);
}

.menu-section:last-child{border-bottom:none}

.menu-title{
  padding:8px 16px;
  font-size:11px;
  font-weight:600;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.5px;
}

.menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 16px;
  background:none;
  border:none;
  color:var(--t1);
  font-size:15px;
  cursor:pointer;
  text-align:left;
}

.menu-item:active{background:var(--bg3)}
.menu-item svg{width:20px;height:20px;color:var(--accent);flex-shrink:0}
.menu-item span{flex:1}
.menu-item .chevron{width:16px;height:16px;color:var(--t3)}

/* 设置子面板 */
.sub-panel{
  position:fixed;
  inset:0;
  background:var(--bg2);
  z-index:220;
  transform:translateX(100%);
  transition:transform .25s ease-out;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:var(--safe-t);
  padding-bottom:var(--safe-b);
}

.sub-panel.open{transform:translateX(0)}

.sub-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 8px;
  border-bottom:1px solid var(--border);
  font-size:17px;
  font-weight:600;
}

.sub-back{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  color:var(--accent);
  cursor:pointer;
  border-radius:8px;
}

.sub-back:active{background:var(--bg3)}
.sub-back svg{width:22px;height:22px}

/* 设置标签页 */
.settings-tabs{
  display:flex;
  gap:4px;
  padding:8px 16px;
  border-bottom:1px solid var(--border);
  overflow-x:auto;
}

.stab{
  padding:6px 14px;
  background:none;
  border:none;
  color:var(--t2);
  font-size:13px;
  cursor:pointer;
  border-radius:14px;
  white-space:nowrap;
}

.stab.active{
  background:var(--accent);
  color:#fff;
}

.stab-panel{display:none;padding:8px 0}
.stab-panel.active{display:block}

/* 设置项 */
.setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}

.setting-row:last-child{border-bottom:none}
.setting-row>span{font-size:15px}
.setting-row>div{display:flex;flex-direction:column;gap:2px}
.setting-row>div>span{font-size:15px}
.setting-row>div>small{font-size:12px;color:var(--t3)}
.setting-row.danger{background:rgba(248,81,73,.05)}

.setting-row select{
  appearance:none;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--t1);
  font-size:14px;
  padding:6px 28px 6px 10px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 6px center;
}

.size-ctrl{
  display:flex;
  align-items:center;
  gap:12px;
}

.size-btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--t1);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.size-btn:active{
  background:rgba(88,166,255,.15);
  border-color:var(--accent);
}

#font-val{
  font-size:15px;
  font-weight:600;
  color:var(--accent);
  min-width:20px;
  text-align:center;
}

.btn-action{
  height:32px;
  padding:0 16px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--t1);
  font-size:13px;
  cursor:pointer;
}

.btn-action:active{background:var(--border)}
.btn-action.danger{
  background:rgba(248,81,73,.12);
  border-color:var(--red);
  color:var(--red);
}
.btn-action.danger:active{background:var(--red);color:#fff}

.sw{
  position:relative;
  display:inline-block;
  width:46px;
  height:28px;
}

.sw input{display:none}

.sw-track{
  position:absolute;
  inset:0;
  background:var(--bg3);
  border-radius:14px;
  border:1px solid var(--border);
  cursor:pointer;
  transition:.2s;
}

.sw-track::before{
  content:'';
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--t2);
  top:2px;
  left:2px;
  transition:.2s;
}

.sw input:checked+.sw-track{
  background:rgba(88,166,255,.15);
  border-color:var(--accent);
}

.sw input:checked+.sw-track::before{
  transform:translateX(18px);
  background:var(--accent);
}

/* 包管理 */
.sub-search{
  display:flex;
  gap:8px;
  padding:12px 16px;
}

.sub-search input{
  flex:1;
  height:40px;
  padding:0 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--t1);
  font-size:14px;
  outline:none;
}

.sub-search input:focus{border-color:var(--accent)}

.btn-go{
  height:40px;
  padding:0 16px;
  background:var(--accent);
  border:none;
  border-radius:8px;
  color:#fff;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}

.pkg-list{
  padding:0 16px 32px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pkg-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
}

.pkg-item div{display:flex;flex-direction:column;gap:2px}
.pkg-item b{font-size:14px;color:var(--t1)}
.pkg-item small{font-size:12px;color:var(--t3)}

.btn-install{
  height:32px;
  padding:0 14px;
  background:rgba(88,166,255,.12);
  border:1px solid var(--accent);
  border-radius:16px;
  color:var(--accent);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
}

.btn-install:active{background:var(--accent);color:#fff}
.btn-install.done{
  background:rgba(63,185,80,.12);
  border-color:var(--green);
  color:var(--green);
  pointer-events:none;
}

/* 历史记录 */
.history-list{
  min-height:200px;
  max-height:50vh;
  overflow-y:auto;
  padding:8px 16px;
}

.history-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--t3);
  font-size:14px;
}

.history-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:8px;
}

.history-item .lang{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg3);
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
}

.history-item .info{flex:1;min-width:0}
.history-item .info .code{
  font-size:13px;
  color:var(--t1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.history-item .info .time{font-size:11px;color:var(--t3)}

.history-item .btn-load{
  padding:6px 12px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--t1);
  font-size:12px;
  cursor:pointer;
}

.history-item .btn-load:active{background:var(--border)}

.btn-clear-history{
  width:calc(100% - 32px);
  margin:16px;
  padding:12px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--t2);
  font-size:14px;
  cursor:pointer;
}

.btn-clear-history:active{background:var(--border)}

/* 加载遮罩 */
.loading{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:300;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.loading.show{display:flex}

.spinner{
  width:36px;
  height:36px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.loading span{color:var(--t2);font-size:14px}

/* 滚动条 */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--t3);border-radius:2px}

/* ===== 横屏/桌面适配（左右分栏预留） ===== */
@media (min-width:768px) and (orientation:landscape){
  .workspace{
    flex-direction:row;
  }
  
  .editor-wrap{
    flex:1;
    height:100%;
  }
  
  .resizer{
    width:8px;
    height:100%;
    cursor:col-resize;
    border-top:none;
    border-bottom:none;
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
  }
  
  .resizer-handle{
    width:4px;
    height:36px;
  }
  
  .output-wrap{
    width:40%;
    height:100%;
  }
  
  .output-wrap.collapsed{
    width:0;
  }
}