:root {
  --font-family: "Noto Sans JP", sans-serif;
  --app-bg: linear-gradient(180deg, #eef2f8 0%, #f8fafd 100%);
  --text-color: #1f2937;
  --surface-color: #ffffff;
  --surface-border: 1px solid #d9deea;
  --surface-radius: 14px;
  --surface-padding: 12px;
  --surface-margin: 12px;
  --surface-shadow: 0 10px 30px rgba(32, 45, 73, 0.08);
  --accent: #295ee6;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: var(--font-family); background: var(--app-bg); color: var(--text-color); }
body.focus-search .topbar, body.focus-search #tileGrid { display: none; }
body.focus-search #searchWrap { position: fixed; inset: 25% 10% auto; z-index: 25; }
.panel { background: var(--surface-color); border: var(--surface-border); border-radius: var(--surface-radius); box-shadow: var(--surface-shadow); padding: var(--surface-padding); margin: var(--surface-margin); }
.topbar, .brand, .top-actions, .search-wrap, .tile-head, .tile-tools { display:flex; align-items:center; gap:8px; }
.topbar { justify-content: space-between; }
.mode-switch { display:flex; gap:6px; flex-wrap:wrap; }
.material-symbols-rounded { font-size: 1.1rem; }
button, input, textarea, select { font: inherit; border: 1px solid #cfd6e4; border-radius: 10px; padding: 8px 10px; background: #fff; color: #111827; }
button { cursor: pointer; }
button.ghost { background: #f2f5ff; }
.mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tile-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:10px; margin: 0 var(--surface-margin) var(--surface-margin); }
.tile { margin:0; min-height: 160px; }
.tile-head { justify-content: space-between; }
.icon { padding: 4px 7px; line-height: 0; }
.search-wrap { gap:10px; }
.search-stack { position: relative; flex:1; }
#searchInput { width:100%; }
.suggestions { position:absolute; top: calc(100% + 4px); left:0; right:0; list-style:none; margin:0; padding:4px; border:1px solid #d7deec; border-radius:10px; background:#fff; max-height:220px; overflow:auto; z-index:20; }
.suggestions li { padding: 7px 8px; border-radius: 8px; cursor:pointer; }
.suggestions li:hover { background:#edf2ff; }
.settings-grid { width:min(920px,96vw); max-height: 88vh; overflow:auto; display:grid; gap:10px; padding:14px; }
fieldset { border:1px solid #d8deeb; border-radius:10px; display:grid; gap:8px; }
label { display:grid; gap:4px; }
.inline-5 { display:grid; gap:6px; grid-template-columns: repeat(5,1fr); }
.totp-manager { display:grid; gap:6px; }
.totp-entry { display:flex; justify-content:space-between; align-items:center; background:#f4f7fd; border-radius:8px; padding:6px 8px; }
.command-dialog { border:none; background: transparent; }
#commandForm { width:min(780px,95vw); }
#commandInput { width:100%; font-size:1.05rem; padding:14px; border:1px solid #b8c5e8; box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.clock-main { font-size: 1.8rem; font-weight: 700; letter-spacing: .04em; }
.shortcut-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.shortcut-item { display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; background:#f7f9ff; border-radius:10px; padding:7px; border:1px solid #e1e7f5; }
.shortcut-item img { width:16px; height:16px; }
.muted { color:#6b7280; margin:0; }
menu { display:flex; justify-content:flex-end; gap:8px; padding:0; margin:0; }