:root{font:16px system-ui,-apple-system,Segoe UI,sans-serif;color-scheme:dark;--bg:#0d1422;--panel:#182338;--panel2:#202f49;--border:#31415b;--text:#f1f5fd;--muted:#a4b3ca;--accent:#60a5fa;--tile:104px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top left,#203453,var(--bg) 55%);min-height:100vh;color:var(--text)}body.light{color-scheme:light;--bg:#eef2f8;--panel:#fff;--panel2:#e6ecf5;--border:#cbd5e1;--text:#142339;--muted:#63738a;--accent:#2563eb;background:#eef2f8}button,input,select{font:inherit}button{cursor:pointer}input,select{width:100%;border:1px solid var(--border);border-radius:11px;padding:12px;background:var(--panel2);color:var(--text)}input[type=file]{padding:8px}label{display:block;font-size:.9rem;color:var(--muted);margin:14px 0 6px}.btn{border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:10px 15px;border-radius:11px}.btn.primary{background:#2563eb;color:white;border-color:#2563eb}.btn.danger{color:#fca5a5}.btn:disabled{opacity:.5}.btn:hover,.tile:hover{filter:brightness(1.08)}.page{max-width:1500px;margin:auto;padding:18px clamp(10px,2.2vw,26px) 56px}.top{display:grid;gap:10px;margin-bottom:16px}.top-main{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.logo{display:grid;place-items:center;background:var(--panel);border-radius:16px;padding:10px;color:var(--text);border:1px solid var(--border)}.logo svg{width:28px;height:28px;display:block}.brand h1{margin:0;font-size:clamp(22px,3vw,28px);line-height:1.05}.sub{color:var(--muted);font-size:13px}.quick-actions,.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.icon-btn{display:grid;place-items:center;min-width:46px;width:46px;height:46px;padding:0}.icon-btn svg{width:21px;height:21px;display:block}.toolbar-row{display:flex;align-items:center;gap:8px}.search{width:100%;min-width:0;max-width:none}.group{background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--border);border-radius:20px;padding:14px;margin-bottom:14px}.group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}.group-head h2{font-size:20px;margin:0;display:flex;align-items:center;gap:6px;line-height:1.1}.group-actions{display:flex;align-items:center;gap:6px}.collapse-btn svg{width:18px;height:18px}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:12px}.tile{border:none;border-radius:16px;background:transparent;min-height:calc(var(--tile) + 8px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--text);padding:4px;position:relative;touch-action:manipulation}.tile-icon-wrap{position:relative;display:inline-block;line-height:0}.tile-icon{width:calc(var(--tile) * .96);height:calc(var(--tile) * .96);border-radius:18px;object-fit:contain;background:transparent;padding:0;display:block}.tile-name{display:none;font-size:12px;font-weight:600;text-align:center;overflow-wrap:anywhere;line-height:1.15;max-width:100%;margin-top:6px}.tile.edit .tile-name,.add-tile .tile-name{display:block}.tile.edit,.group.edit{outline:1px dashed var(--accent)}.tile.dragging,.group.dragging{opacity:.45}.placeholder{border:2px dashed var(--accent)}.empty{padding:24px;color:var(--muted);text-align:center}.center{min-height:90vh;display:grid;place-items:center;padding:20px}.authbox,.modalbox{width:min(440px,100%);background:var(--panel);border:1px solid var(--border);padding:28px;border-radius:23px;box-shadow:0 25px 60px #0003}.authbox h1{margin-top:0}.authbox .btn{width:100%;margin-top:20px}.overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:14px;z-index:20}.modalbox{max-height:94vh;overflow:auto}.modalbox h2{margin:0}.modal-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}.flex{display:flex;gap:10px;align-items:center}.flex>*{flex:1}.hint{font-size:13px;color:var(--muted);line-height:1.5}.settings{max-width:850px}.settings section{background:var(--panel);border:1px solid var(--border);border-radius:18px;margin:16px 0;padding:20px}.settings h3{margin-top:0}.settings h2{margin-bottom:0}.settings .rows{display:grid;grid-template-columns:1fr 1fr;gap:15px}.hidden{display:none!important}#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#263a58;color:#fff;padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}.little{font-size:13px}.back{margin-bottom:12px}.edit-tip{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;color:var(--accent);background:#0f172a55}.edit-tip svg{width:14px;height:14px}.docker-dot{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 1px 4px #0007}.docker-dot.running{background:#22c55e}.docker-dot.stopped{background:#ef4444}.docker-dot.unknown{background:#94a3b8}.add-icon{display:grid;place-items:center;border-radius:18px;background:var(--panel2);width:calc(var(--tile) * .96);height:calc(var(--tile) * .96)}.add-icon svg{width:32px;height:32px}.drag-handle{cursor:grab;user-select:none;opacity:.8}.hubmark{padding:9px 10px}.hubmark svg{width:26px;height:26px}@media(max-width:650px){:root{--tile:64px}.page{padding:10px 8px 38px}.top{gap:8px;margin-bottom:10px}.top-main{align-items:flex-start}.brand{gap:10px;min-width:0;flex:1}.brand h1{font-size:clamp(20px,6vw,24px)}.logo{border-radius:14px;padding:8px}.logo svg{width:22px;height:22px}.sub{font-size:12px}.quick-actions{gap:6px;flex-shrink:0}.icon-btn{width:42px;min-width:42px;height:42px;border-radius:12px}.icon-btn svg{width:19px;height:19px}.toolbar-row{gap:8px}.search{padding:10px 12px;border-radius:14px}.group{padding:8px;border-radius:18px;margin-bottom:10px}.group-head{margin-bottom:8px}.group-head h2{font-size:15px}.group-actions .btn{width:40px;min-width:40px;height:40px;padding:0}.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.tile{padding:5px;border-radius:14px;min-height:72px}.tile-icon{width:48px;height:48px;border-radius:12px;padding:4px}.tile.edit .tile-name,.add-tile .tile-name{font-size:10px;margin-top:3px}.edit-tip{top:4px;right:4px;width:18px;height:18px}.edit-tip svg{width:12px;height:12px}.docker-dot{right:4px;bottom:4px;width:11px;height:11px}.settings .rows{grid-template-columns:1fr}}

/* Fluid mobile portrait columns; desktop and landscape obey settings. */
@media (max-width:650px) and (orientation:portrait){
 .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(5px,1.5vw,10px)}
 .tile{min-width:0;min-height:0;width:100%;aspect-ratio:1;padding:3px;background:transparent;border:0}
 .tile-icon-wrap{position:relative;display:block;width:90%;max-width:100%;aspect-ratio:1;line-height:0}
 .tile-icon{width:100%;height:100%;padding:0;object-fit:contain;background:transparent;border:0;border-radius:14px}
 .docker-dot{right:-1px;bottom:-1px;width:13px;height:13px}
 .tile.edit{aspect-ratio:auto;min-height:76px}
 .tile.edit .tile-icon-wrap{width:75%}
 .add-tile{min-height:76px}.add-tile .add-icon{width:75%;height:auto;aspect-ratio:1}
}

/* v1.1.19 compact open sections: vertical heading, horizontal when collapsed. */
@media (max-width:650px) and (orientation:portrait){
  .group.is-open { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:stretch; column-gap:5px; padding:6px 7px 6px 5px; }
  .group.is-open .group-head { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-width:0; gap:6px; margin:0; padding:2px 0; }
  .group.is-open .group-head h2 { font-size:13px; font-weight:700; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; line-height:1; margin:0 auto; min-height:0; }
  .group.is-open .group-head .drag-handle { display:inline; }
  .group.is-open .group-actions { flex-direction:column; gap:4px; flex-shrink:0; }
  .group.is-open .group-actions .btn { width:29px; min-width:29px; height:29px; border-radius:9px; padding:0; }
  .group.is-open .group-actions .btn svg { width:15px; height:15px; }
  .group.is-open .tiles { grid-column:2; grid-row:1; align-content:start; min-width:0; }
  .group.is-collapsed { display:block; padding:6px 9px; }
  .group.is-collapsed .group-head { display:flex; flex-direction:row; align-items:center; margin:0; min-height:32px; }
  .group.is-collapsed .group-head h2 { writing-mode:horizontal-tb; transform:none; font-size:15px; }
  .group.is-collapsed .group-actions .btn { width:32px; min-width:32px; height:32px; }
  .group.is-open .tile { min-width:0; }
}

/* v1.1.20: group title itself toggles open/collapsed states. */
.group-title-toggle{display:block;font:inherit;font-weight:inherit;color:inherit;background:transparent;border:0;padding:5px 0;margin:0;text-align:inherit;cursor:pointer;line-height:inherit;max-width:100%}
.group-title-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
@media (max-width:650px) and (orientation:portrait){
 .group.is-open .group-head{justify-content:center}
 .group.is-open .group-head h2{writing-mode:horizontal-tb;transform:none;display:flex;align-items:center;justify-content:center;max-height:100%;min-height:0;flex:1}
 .group.is-open .group-title-toggle{writing-mode:vertical-rl;transform:rotate(180deg);padding:4px 6px;white-space:nowrap}
 .group.is-collapsed .group-title-toggle{writing-mode:horizontal-tb;transform:none;padding:5px 0}
}

.brand-app-icon{height:30px;width:30px;object-fit:contain;display:block}.hubmark{background:transparent;border:0;padding:0}.autostart-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}.autostart-row input{width:22px;height:22px;flex-shrink:0}.autostart-row small{color:var(--muted)}

/* v1.1.25: Docker autostart collapsed by default. */
.autostart-details>summary{cursor:pointer;font-size:1.12rem;font-weight:650;list-style-position:inside;padding:3px 0}
.autostart-details>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.autostart-content{padding:10px 0 0}