: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); }
.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:10px; }
.topbar { justify-content: space-between; }
.top-actions { flex-wrap:wrap; justify-content:flex-end; }
.mode-switch { display:flex; gap:8px; flex-wrap:wrap; }
.material-symbols-rounded { font-size: 1.1rem; }
button, input, textarea, select { font: inherit; border: 1px solid #cfd6e4; border-radius: 10px; padding: 9px 12px; 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(280px,1fr)); gap:12px; margin: 0 var(--surface-margin) var(--surface-margin); }
.tile { margin:0; min-height: 170px; }
.tile-head { justify-content: space-between; }
.icon { padding: 4px 8px; line-height: 0; }
.search-wrap { gap:10px; position: relative; overflow: visible; z-index: 40; --search-extra-height: 0px; --search-base-height: 56px; transition: min-height .18s ease, box-shadow .18s ease; }
.search-wrap.search-focused { box-shadow: 0 12px 30px rgba(34,48,76,.14); }
.search-wrap.search-expanded { min-height: calc(var(--search-base-height) + var(--search-extra-height)); }
.search-stack { position: relative; flex:1; overflow: visible; display:grid; gap:6px; }
#searchInput { width:100%; }
.suggestions { display:none; list-style:none; margin:0; padding:4px; border:1px solid #d7deec; border-radius:10px; background:#fff; max-height:220px; overflow:auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.search-wrap.search-expanded .suggestions { display:block; }
.suggestions li { padding: 9px 10px; border-radius: 8px; cursor:pointer; }
.suggestions li:hover, .suggestions li.active { background:#edf2ff; }
.search-actions { display:flex; gap:8px; align-items:center; }
.icon-btn { width:40px; height:40px; display:grid; place-items:center; padding:0; }
.icon-btn .material-symbols-rounded { font-size:1rem; }
.suggestion-meta { font-size:.78rem; color:#64748b; margin-left:6px; }
.suggestions li.empty { color:#64748b; cursor:default; }
.suggestions li.empty:hover { background:transparent; }
.settings-grid { width:min(920px,96vw); max-height: 88vh; overflow:auto; display:grid; gap:12px; padding:14px; }
fieldset { border:1px solid #d8deeb; border-radius:10px; display:grid; gap:10px; }
label { display:grid; gap:6px; }
.inline-2 { display:grid; gap:8px; grid-template-columns: 1fr auto; }
.mode-manager { display:grid; gap:6px; }
.mode-row { display:flex; justify-content:space-between; align-items:center; background:#f4f7fd; border-radius:8px; padding:7px 10px; }
.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:8px; border:1px solid #e1e7f5; }
.shortcut-single { display:grid; gap:6px; text-decoration:none; color:inherit; background:#f7f9ff; border:1px solid #e1e7f5; border-radius:12px; padding:12px; }
.shortcut-single img { width:22px; height:22px; }
.rss-list { display:grid; gap:8px; margin-top:8px; }
.rss-card { display:grid; gap:4px; text-decoration:none; color:inherit; border:1px solid #e0e7ff; border-radius:10px; padding:8px 10px; background:#f8faff; }
.nice-list { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.nice-list li { display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; background:#f8faff; }
.stack-inline { display:flex; gap:8px; flex-wrap:wrap; }
.stack-inline input { flex:1; min-width:130px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip { width:32px; height:32px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #cad5ef; }
.color-preview { height:48px; border-radius:8px; border:1px solid #d4d9ea; }
.mini-calendar { display:grid; grid-template-columns: repeat(7,1fr); gap:4px; margin-top:8px; }
.mini-calendar span, .mini-calendar b { text-align:center; padding:4px; border-radius:6px; }
.mini-calendar .today { background: var(--accent); color:#fff; }
.tile-editor { margin-top:10px; border-top:1px dashed #d0d7eb; padding-top:8px; display:grid; gap:6px; }
.tile-editor summary { cursor:pointer; color:#4b5563; }
.checks { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:4px; }
.muted { color:#6b7280; margin:0; }
menu { display:flex; justify-content:flex-end; gap:8px; padding:0; margin:0; }
.edit-only { display:none !important; }
body.editing .edit-only { display:flex !important; }
body.editing .tile-tools.edit-only { display:flex !important; }
@media (max-width: 700px) { .checks { grid-template-columns: 1fr; } }

body { background-attachment: fixed; }
.topbar.panel { backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.panel { transition: box-shadow .2s ease, transform .2s ease; }
.tile:hover { box-shadow: 0 14px 36px rgba(26,38,65,.14); transform: translateY(-1px); }
.tile-title { margin: 0; font-size: 1rem; }
.tile-title, .widget-meta, .rss-card strong, .rss-card span, .shortcut-item, .shortcut-single span, .shortcut-single small, .nice-list li, .mode-btn, .mode-row span, .suggestions li { overflow-wrap: anywhere; word-break: break-word; }
.tile-head { gap: 8px; }
.tile-head > * { min-width: 0; }
.tile-tools { flex-shrink: 0; }
.icon { background: #f5f8ff; border-color: #dce4f8; }
.icon:hover { background: #eaf0ff; }
.search-wrap.panel { box-shadow: 0 8px 24px rgba(34,48,76,.10); position: relative; z-index: 45; overflow: visible; }
.rss-scroll { max-height: 280px; overflow: auto; padding-right: 4px; }
.rss-scroll::-webkit-scrollbar { width: 8px; }
.rss-scroll::-webkit-scrollbar-thumb { background: #cbd7f3; border-radius: 8px; }
.rss-card { border-color: #d7e2ff; }
.rss-card:hover { border-color: var(--accent); background: #f1f6ff; }
.tile-body textarea { width: 100%; border-radius: 10px; min-height: 120px; }
.widget-meta { font-size: .85rem; color: #64748b; }
.progress-track { height: 12px; background: #e6ebf8; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #55a7ff); }
.timer-main { font-size: 2rem; font-weight: 700; letter-spacing: .03em; }

body.variant-glass .panel { background: color-mix(in srgb, #ffffff 72%, transparent); backdrop-filter: blur(10px); }
body.variant-vivid .panel { border-color: color-mix(in srgb, var(--accent) 30%, #d9deea); }
body.variant-vivid .mode-btn.active { box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 36%, transparent); }
body.variant-paper { background-image: radial-gradient(circle at 10% 10%, #ffffff 0, #f4f0e8 62%); }
body.variant-paper .panel { box-shadow: 0 6px 16px rgba(80, 59, 26, 0.12); border-color: #ddd1bb; }

.clock-display.compact .clock-main { font-size: 1.35rem; letter-spacing: .02em; }
.clock-display.flip .clock-main { font-family: "Roboto Mono", monospace; background: #0f172a; color: #e2e8f0; display: inline-block; padding: 6px 10px; border-radius: 10px; }
.analog-wrap { display:grid; gap:10px; justify-items:center; }
.analog-clock-face { width: 150px; aspect-ratio: 1/1; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 40%, #94a3b8); background: radial-gradient(circle at 50% 45%, #fff 0 62%, #eef2ff 100%); position: relative; box-shadow: inset 0 0 0 2px #fff; }
.analog-clock-face::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.analog-tick { position: absolute; top: 6px; left: 50%; width: 2px; height: 12px; background: #64748b; transform-origin: 50% 68px; }
.analog-hand { position: absolute; bottom: 50%; left: 50%; transform-origin: 50% 100%; border-radius: 999px; }
.analog-hand.hour { width: 4px; height: 34px; background: #0f172a; }
.analog-hand.minute { width: 3px; height: 50px; background: #334155; }
.analog-hand.second { width: 2px; height: 58px; background: #ef4444; }
.world-clock-list li { align-items: center; }
.stopwatch-laps { max-height: 140px; overflow: auto; }