/* ui.css — Apple 暗夜玻璃风（搜索框 + 控制面板） */

/* ========== 可编辑主题变量（你可以改这部分） ========== */
:root{
  --bg-dark: #030618;
  --panel-radius: 14px;
  --glass-fill: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --accent-icy: rgba(140,185,255,0.95);
  --text-light: rgba(240,245,255,0.95);
  --muted: rgba(180,195,210,0.36);
  --glass-blur: 12px;
  --search-height: 56px;
  --search-width: min(820px, calc(100% - 160px));
}
/* ========== End 可编辑 ========== */

html,body{height:100%;margin:0;background:var(--bg-dark);font-family:"Helvetica Neue","PingFang SC",Arial,sans-serif;color:var(--text-light);-webkit-font-smoothing:antialiased;}
#canvas-container{position:absolute;inset:0;z-index:1;}
#ui-layer{position:absolute;inset:0;pointer-events:none;z-index:60}

/* 折叠按钮 */
.glass-toggle{pointer-events:auto;position:absolute;left:18px;top:18px;width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur));box-shadow:0 10px 30px rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-light);z-index:100;}
.glass-toggle:hover{transform:translateY(-3px);}

/* 顶部搜索 */
.glass-search{pointer-events:auto;position:absolute;left:calc(50% - var(--search-width)/2);top:18px;width:var(--search-width);height:var(--search-height);background:var(--glass-fill);border-radius:14px;border:1px solid var(--glass-border);display:flex;align-items:center;padding:8px 12px;backdrop-filter:blur(var(--glass-blur)) saturate(120%);box-shadow:0 12px 40px rgba(0,0,0,0.6);z-index:120;}
#search-input{background:transparent;border:none;outline:none;color:var(--text-light);font-size:16px;width:100%;padding:10px 12px;font-weight:500;}
#search-input::placeholder{color:rgba(200,210,220,0.35);font-weight:400}

/* 搜索下拉候选 */
.search-results{position:absolute;left:0;top:calc(var(--search-height) + 8px);width:100%;max-height:320px;overflow:auto;border-radius:10px;background:rgba(10,14,20,0.88);border:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(8px);box-shadow:0 12px 40px rgba(0,0,0,0.6);display:none;padding:8px 6px;z-index:130;}
.search-results.visible{display:block;}
.search-item{padding:10px 12px;border-radius:8px;margin:6px 4px;cursor:pointer;color:var(--text-light);font-size:14px;display:flex;flex-direction:column;gap:4px;}
.search-item:hover{background:rgba(255,255,255,0.02)}
.search-item .title{font-size:15px;color:var(--text-light);font-weight:600}
.search-item .sub{font-size:12px;color:var(--muted)}

/* 控制面板 */
.glass-panel{pointer-events:auto;position:absolute;top:86px;left:18px;max-width:360px;width:calc(100vw - 56px);background:var(--glass-fill);border-radius:var(--panel-radius);border:1px solid var(--glass-border);padding:12px;backdrop-filter:blur(var(--glass-blur)) saturate(120%);box-shadow:0 10px 40px rgba(0,0,0,0.6);z-index:110;transition:transform .28s,opacity .22s;}
.glass-panel.collapsed{opacity:0;pointer-events:none;transform:translateY(-8px);}

/* lil-gui 呈现风格微调 */
#gui-container .lil-gui{background:transparent;color:var(--text-light)}
.lil-gui .title{color:var(--text-light)}
.lil-gui .cr.number input{background:rgba(255,255,255,0.025);color:var(--text-light);border-radius:8px}
.lil-gui .cr .slider .handle{background:var(--accent-icy);box-shadow:0 8px 18px rgba(80,150,255,0.12)}

/* loader */
#loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.45);padding:8px 12px;border-radius:10px;color:var(--text-light);border:1px solid rgba(255,255,255,0.03);z-index:150}

/* responsive */
@media(max-width:680px){
  .glass-search{left:12px;right:12px;width:auto;top:12px}
  .glass-panel{display:none}
}