*{box-sizing:border-box}
html{min-height:100%;background:#020617}
body{margin:0;min-height:100vh;background:#020617;color:#f1f5f9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;overflow-x:hidden}
button,input,textarea{font:inherit}
button{border:0;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
a{color:inherit;text-decoration:none}
.bg-effects{pointer-events:none;position:fixed;inset:0;overflow:hidden}
.bg-blob{position:absolute;border-radius:9999px;filter:blur(64px)}
.bg-blob-1{left:3rem;top:4rem;width:16rem;height:16rem;background:rgba(99,102,241,.2)}
.bg-blob-2{right:5rem;top:10rem;width:18rem;height:18rem;background:rgba(34,211,238,.1)}
.bg-blob-3{left:33%;bottom:2.5rem;width:18rem;height:18rem;background:rgba(217,70,239,.1)}
.bg-stars{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.14) 1px,transparent 1px),radial-gradient(circle at 80% 30%,rgba(255,255,255,.1) 1px,transparent 1px),radial-gradient(circle at 40% 70%,rgba(255,255,255,.08) 1px,transparent 1px);background-size:90px 90px}
.page{position:relative;z-index:1;width:min(100% - 48px,1440px);min-height:100vh;margin:0 auto;padding:24px 0 8px;display:flex;flex-direction:column;gap:20px}
.site-header,.panel,.shortcut-panel,.help-panel{border:1px solid rgba(255,255,255,.1);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.06)),rgba(15,23,42,.78);box-shadow:0 26px 70px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px)}
.site-header{position:relative;z-index:100;padding:20px 24px}
.header-top,.header-left,.header-actions,.title-row,.panel-title-row,.panel-header,.panel-actions,.generated-header,.button-row,.favorite-actions,.preset-actions,.scenario-row-actions{display:flex;align-items:center}
.header-top{justify-content:space-between;gap:12px;flex-wrap:wrap}
.header-left,.header-actions,.panel-actions,.button-row,.favorite-actions,.preset-actions,.scenario-row-actions{gap:8px;flex-wrap:wrap}
.portal-link,.tag-pill,.header-button,.soft-button,.primary-button,.violet-button,.cyan-button,.spoiler-badge,.count-badge,.mini-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;line-height:1.3;transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.portal-link,.header-button,.soft-button{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.1);color:#e2e8f0}
.portal-link{position:relative;z-index:1000;padding:4px 12px;color:#a5f3fc;font-size:12px}
.portal-link:hover,.header-button:hover,.soft-button:hover{transform:translateY(-2px);background:rgba(255,255,255,.15)}
.portal-tooltip{pointer-events:none;position:absolute;left:50%;top:100%;z-index:9999;width:max-content;margin-top:8px;transform:translateX(-50%);border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(2,6,23,.98);padding:8px 12px;color:#ecfeff;font-size:12px;opacity:0;box-shadow:0 18px 42px rgba(0,0,0,.45);backdrop-filter:blur(16px);transition:opacity .16s ease,transform .16s ease;white-space:nowrap}
.portal-link:hover .portal-tooltip{opacity:1;transform:translateX(-50%) translateY(2px)}
.tag-pill,.header-button{padding:4px 12px;font-size:12px}
.tag-cyan{border:1px solid rgba(103,232,249,.3);background:rgba(103,232,249,.1);color:#cffafe}
.tag-violet{border:1px solid rgba(196,181,253,.3);background:rgba(196,181,253,.1);color:#ede9fe}
.tag-amber{border:1px solid rgba(252,211,77,.3);background:rgba(252,211,77,.1);color:#fef3c7}
.title-row{margin-top:18px;gap:14px;align-items:flex-start}
.tool-icon{position:relative;z-index:1;display:flex;width:48px;height:48px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:radial-gradient(circle at 72% 25%,rgba(103,232,249,.12),transparent 32%),rgba(15,23,42,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(34,211,238,.1)}
.tool-icon-bird{width:28px;height:28px;color:#fff}
.tool-icon-star{position:absolute;right:-4px;top:-4px;color:#a5f3fc;font-size:14px;text-shadow:0 0 8px rgba(103,232,249,.8)}
.tool-icon-search{position:absolute;right:-4px;bottom:-4px;display:flex;width:20px;height:20px;align-items:center;justify-content:center;border:1px solid rgba(165,243,252,.5);border-radius:999px;background:rgba(103,232,249,.15);color:#cffafe;font-size:13px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.035em}
h2{font-size:20px}
.site-description,.note,.composer-header p,.panel-header p{color:#cbd5e1;font-size:14px;line-height:1.7}
.three-column-layout{display:grid;grid-template-columns:280px minmax(0,1.05fr) minmax(340px,.95fr);gap:20px;align-items:start}
.left-column,.right-column{display:flex;flex-direction:column;gap:20px}
.sticky-column{position:sticky;top:20px;max-height:none;overflow:visible}
.center-column.sticky-column{align-self:start}
.panel,.shortcut-panel,.help-panel{padding:20px}
.panel-header.compact{align-items:flex-start;justify-content:space-between;gap:12px}.panel-header.compact .soft-button.small{margin-left:auto;white-space:nowrap}
.is-hidden{display:none!important}
.mode-list,.favorite-list,.scenario-search-list{display:grid;gap:8px;margin-top:12px}
.mode-button{width:100%;border-radius:16px;background:rgba(255,255,255,.05);padding:12px 16px;color:#cbd5e1;text-align:left;font-size:14px}
.mode-button:hover{background:rgba(255,255,255,.1);color:#fff}
.mode-button.is-active{background:#22d3ee;color:#020617;font-weight:800;box-shadow:0 14px 32px rgba(6,182,212,.2)}
.count-badge{background:rgba(255,255,255,.1);padding:2px 8px;color:#cbd5e1;font-size:12px}
.favorite-card,.scenario-search-row,.preset-card,.shortcut-card{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.05);padding:12px}
.favorite-label{overflow-wrap:anywhere;font-size:12px;font-weight:700;line-height:1.6}
.favorite-query{margin-top:4px;overflow-wrap:anywhere;color:#94a3b8;font-size:11px;line-height:1.6}
.mini-button{background:rgba(255,255,255,.1);padding:6px 12px;color:#e2e8f0;font-size:12px;border-radius:999px}
.cyan-mini{background:rgba(103,232,249,.15);color:#cffafe}
.primary-mini,.primary-button{background:#67e8f9;color:#020617;font-weight:800}
.violet-mini,.violet-button{background:rgba(196,181,253,.2);color:#ede9fe}
.danger-mini{background:rgba(253,164,175,.15);color:#ffe4e6}
.cyan-button{background:rgba(103,232,249,.15);color:#cffafe;font-weight:700}
.danger-button{background:rgba(253,164,175,.15);border:1px solid rgba(253,164,175,.3);color:#ffe4e6;font-weight:800}
.danger-button:hover,.danger-mini:hover{background:rgba(253,164,175,.25);transform:translateY(-1px)}
.primary-button,.violet-button,.cyan-button,.soft-button{padding:10px 18px;font-size:14px}
.danger-button.compact{padding:4px 10px;font-size:12px}
.soft-button.small{padding:7px 12px;font-size:12px}
.primary-button.small{padding:10px 16px;white-space:nowrap}
.composer-header,.panel-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.spoiler-badge{border:1px solid rgba(252,211,77,.3);background:rgba(252,211,77,.1);padding:8px 16px;color:#fef3c7;font-size:14px;font-weight:700}
.composer-section{margin-top:20px;scroll-margin-top:24px}
.composer-section h3,.generated-header h3{color:#94a3b8;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.generated-header{justify-content:space-between}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;overflow:visible}
.chip{position:relative;z-index:1;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.05);padding:6px 12px;color:#cbd5e1;font-size:14px;transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease}
.chip:hover{z-index:10000;transform:translateY(-1px);background:rgba(255,255,255,.1)}
.chip.is-active{border-color:rgba(196,181,253,.4);background:rgba(196,181,253,.2);color:#ede9fe}
.chip-cyan.is-active{border-color:rgba(103,232,249,.4);background:rgba(103,232,249,.2);color:#ecfeff}
.chip-danger.is-active{border-color:rgba(253,164,175,.4);background:rgba(253,164,175,.2);color:#fff1f2}
.chip.is-disabled{opacity:.5}
.chip-tooltip{pointer-events:none;position:absolute;left:50%;bottom:calc(100% + 10px);top:auto;z-index:99999;width:min(300px,80vw);margin-top:0;transform:translateX(-50%) translateY(4px);border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(2,6,23,.98);padding:9px 12px;color:#f8fafc;text-align:left;font-size:12px;line-height:1.55;opacity:0;box-shadow:0 20px 48px rgba(0,0,0,.55);backdrop-filter:blur(16px);transition:opacity .16s ease,transform .16s ease}
.chip:hover .chip-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}
.query-preview,.scenario-add-row input,.scenario-row-input,.generated-box textarea,.preset-query-input,.preset-title-input,.preset-desc-input{border:1px solid rgba(255,255,255,.1);color:#e2e8f0;outline:none}
.query-preview{margin-top:8px;min-height:48px;border-radius:16px;background:rgba(2,6,23,.8);padding:12px;overflow-wrap:anywhere}
.query-preview b{margin-left:4px;color:#67e8f9;animation:pulse 1.4s ease-in-out infinite}
.generated-box{margin-top:20px;border:1px solid rgba(103,232,249,.2);border-radius:24px;background:rgba(103,232,249,.1);padding:16px}
.generated-box textarea{margin-top:12px;min-height:120px;width:100%;resize:vertical;border-radius:16px;background:rgba(2,6,23,.8);padding:14px;color:#ecfeff;font-size:14px;line-height:1.7}
.button-row{margin-top:14px}
.scenario-add-row{display:flex;gap:8px;margin-top:14px}
.scenario-add-row input,.scenario-row-input{min-width:0;width:100%;border-radius:16px;background:rgba(2,6,23,.8);padding:11px 12px;font-size:13px}
.scenario-row-top{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;align-items:center}.scenario-row-label{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(103,232,249,.12);color:#cffafe;font-size:11px;font-weight:800;line-height:1;padding:7px 8px;white-space:nowrap}.scenario-row-actions{margin-top:8px}
.preset-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
.preset-card{border-radius:22px}
.preset-title-input,.preset-desc-input,.preset-query-input{width:100%;background:rgba(2,6,23,.72)}
.preset-title-input,.preset-desc-input{border-radius:12px;padding:9px 10px}
.preset-title-input{font-weight:800}
.preset-desc-input{margin-top:8px;color:#cbd5e1;font-size:12px}
.preset-query-input{margin-top:14px;min-height:104px;resize:vertical;border-radius:16px;padding:12px;color:#e2e8f0;font-size:12px;line-height:1.6}
.preset-actions{margin-top:10px}
.shortcut-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.shortcut-card strong{display:block;color:#cffafe;font-size:12px}
.shortcut-card span{display:block;margin-top:4px;color:#cbd5e1;font-size:12px;line-height:1.5}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:1200px){.three-column-layout{grid-template-columns:260px minmax(0,1fr)}.right-column{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.sticky-column{position:static;max-height:none;overflow:visible}}
@media(max-width:900px){.page{width:min(100% - 32px,1280px)}.three-column-layout{grid-template-columns:1fr}.right-column{display:flex}.shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.page{width:min(100% - 24px,1280px);padding:12px 0}.site-header,.panel,.shortcut-panel,.help-panel{border-radius:22px;padding:18px}.shortcut-grid{grid-template-columns:1fr}.scenario-add-row{flex-direction:column}.button-row,.panel-actions{flex-direction:column;align-items:stretch}.button-row button,.panel-actions button{width:100%}h1{font-size:26px}}
.scenario-panel .scenario-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.scenario-control-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px;
margin-top: 14px;
align-items: center;
}
.scenario-control-row input {
min-width: 0;
width: 100%;
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
background: rgba(2,6,23,.8);
padding: 11px 12px;
color: #e2e8f0;
font-size: 13px;
outline: none;
}
.scenario-control-row input:focus {
border-color: rgba(103,232,249,.45);
box-shadow: 0 0 0 3px rgba(103,232,249,.12);
}
.preset-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.preset-title-row .cyan-button {
margin-left: auto;
white-space: nowrap;
}
.preset-note {
margin-top: 6px;
}
@media(max-width:720px) {
.scenario-control-row {
grid-template-columns: 1fr;
}
.preset-title-row {
flex-direction: column;
align-items: stretch;
}
.preset-title-row .cyan-button {
width: 100%;
margin-left: 0;
}
}
.tool-footer-note {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
border: 1px solid rgba(255,255,255,.09);
border-radius: 18px;
background: rgba(15,23,42,.62);
box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter: blur(14px);
padding: 10px 16px;
}
.tool-footer-note h2 {
margin: 0 0 4px;
color: #e2e8f0;
font-size: 13px;
font-weight: 800;
letter-spacing: .02em;
}
.tool-footer-note p {
margin: 4px 0 0;
color: #cbd5e1;
font-size: 10.5px;
line-height: 1.6;
}
@media(max-width:720px) {
.tool-footer-note {
width: 100%;
border-radius: 16px;
padding: 10px 13px;
}
.tool-footer-note h2 {
font-size: 12px;
}
.tool-footer-note p {
font-size: 10px;
}
}
.help-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.help-card {
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
background: rgba(255,255,255,.05);
padding: 12px;
}
.help-card h3 {
margin: 0;
color: #cffafe;
font-size: 13px;
font-weight: 800;
}
.help-card p {
margin: 6px 0 0;
color: #cbd5e1;
font-size: 12px;
line-height: 1.6;
}
@media(max-width:1200px) {
.help-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media(max-width:720px) {
.help-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
Light Mode
========================================================= */
.theme-toggle-button {
min-width: 104px;
}
html.light-mode,
html.light-mode body,
body.light-mode {
background: #eef4fb;
color: #172033;
}
body.light-mode .bg-blob-1 { background: rgba(96, 165, 250, .24); }
body.light-mode .bg-blob-2 { background: rgba(34, 211, 238, .16); }
body.light-mode .bg-blob-3 { background: rgba(148, 163, 184, .18); }
body.light-mode .bg-stars {
background-image:
radial-gradient(circle at 20% 20%, rgba(37, 99, 235, .16) 1px, transparent 1px),
radial-gradient(circle at 80% 30%, rgba(71, 85, 105, .12) 1px, transparent 1px),
radial-gradient(circle at 40% 70%, rgba(14, 116, 144, .1) 1px, transparent 1px);
}
body.light-mode .site-header,
body.light-mode .panel,
body.light-mode .shortcut-panel,
body.light-mode .help-panel,
body.light-mode .tool-footer-note {
border-color: rgba(51, 65, 85, .16);
background:
linear-gradient(135deg, rgba(255,255,255,.86), rgba(226,232,240,.62)),
rgba(248, 251, 255, .9);
box-shadow:
0 22px 54px rgba(51, 65, 85, .14),
inset 0 1px 0 rgba(255,255,255,.82);
color: #172033;
}
body.light-mode .portal-link,
body.light-mode .header-button,
body.light-mode .soft-button,
body.light-mode .count-badge {
border-color: rgba(71, 85, 105, .18);
background: rgba(248, 250, 252, .72);
color: #334155;
}
body.light-mode .mini-button {
border: 1px solid rgba(71, 85, 105, .18);
background: rgba(254, 243, 199, .74);
color: #334155;
box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
body.light-mode .portal-link {
color: #1d4ed8;
}
body.light-mode .portal-link:hover,
body.light-mode .header-button:hover,
body.light-mode .soft-button:hover {
background: rgba(255,255,255,.96);
box-shadow: 0 10px 22px rgba(51, 65, 85, .12);
}
body.light-mode .mini-button:hover {
background: rgba(253, 230, 138, .86);
box-shadow: 0 8px 18px rgba(51, 65, 85, .12);
}
body.light-mode .portal-tooltip,
body.light-mode .chip-tooltip {
border-color: rgba(71, 85, 105, .18);
background: rgba(248, 251, 255, .98);
color: #172033;
box-shadow: 0 18px 38px rgba(51, 65, 85, .2);
}
body.light-mode .tag-cyan,
body.light-mode .cyan-button,
body.light-mode .cyan-mini {
border-color: rgba(14, 116, 144, .22);
background: rgba(14, 165, 233, .1);
color: #075985;
}
body.light-mode .tag-violet,
body.light-mode .violet-button,
body.light-mode .violet-mini {
border-color: rgba(99, 102, 241, .22);
background: rgba(99, 102, 241, .08);
color: #3730a3;
}
body.light-mode .tag-amber,
body.light-mode .spoiler-badge {
border-color: rgba(100, 116, 139, .22);
background: rgba(226, 232, 240, .72);
color: #334155;
}
body.light-mode .tool-icon {
border-color: rgba(71, 85, 105, .16);
background:
radial-gradient(circle at 72% 25%, rgba(96,165,250,.24), transparent 32%),
rgba(248, 251, 255, .86);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.82),
0 12px 28px rgba(51, 65, 85, .12);
}
body.light-mode .tool-icon-bird { color: #334155; }
body.light-mode .tool-icon-star { color: #2563eb; text-shadow: 0 0 8px rgba(96, 165, 250, .34); }
body.light-mode .tool-icon-search {
border-color: rgba(37, 99, 235, .26);
background: rgba(59, 130, 246, .12);
color: #1d4ed8;
}
body.light-mode .site-description,
body.light-mode .note,
body.light-mode .composer-header p,
body.light-mode .panel-header p,
body.light-mode .help-card p,
body.light-mode .tool-footer-note p,
body.light-mode .favorite-query,
body.light-mode .preset-desc-input {
color: #475569;
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode .help-card h3,
body.light-mode .tool-footer-note h2,
body.light-mode .favorite-label {
color: #172033;
}
body.light-mode .mode-button,
body.light-mode .favorite-card,
body.light-mode .scenario-search-row,
body.light-mode .preset-card,
body.light-mode .shortcut-card,
body.light-mode .help-card {
border-color: rgba(71, 85, 105, .14);
background: rgba(255,255,255,.68);
color: #172033;
}
body.light-mode .mode-button { color: #334155; }
body.light-mode .mode-button:hover { background: rgba(255,255,255,.92); color: #0f172a; }
body.light-mode .mode-button.is-active,
body.light-mode .primary-button,
body.light-mode .primary-mini {
background: #38bdf8;
color: #082f49;
box-shadow: 0 14px 32px rgba(14, 165, 233, .22);
}
body.light-mode .danger-button,
body.light-mode .danger-mini {
border-color: rgba(190, 18, 60, .18);
background: rgba(244, 63, 94, .09);
color: #9f1239;
}
body.light-mode .composer-section h3,
body.light-mode .generated-header h3 {
color: #64748b;
}
body.light-mode .chip {
border-color: rgba(71, 85, 105, .14);
background: rgba(255,255,255,.68);
color: #334155;
}
body.light-mode .chip:hover { background: rgba(255,255,255,.94); }
body.light-mode .chip.is-active {
border-color: rgba(99, 102, 241, .24);
background: rgba(99, 102, 241, .09);
color: #3730a3;
}
body.light-mode .chip-cyan.is-active {
border-color: rgba(14, 116, 144, .24);
background: rgba(14, 165, 233, .1);
color: #075985;
}
body.light-mode .chip-danger.is-active {
border-color: rgba(190, 18, 60, .2);
background: rgba(244, 63, 94, .1);
color: #9f1239;
}
body.light-mode .query-preview,
body.light-mode .scenario-add-row input,
body.light-mode .scenario-control-row input,
body.light-mode .scenario-row-input,
body.light-mode .generated-box textarea,
body.light-mode .preset-query-input,
body.light-mode .preset-title-input,
body.light-mode .preset-desc-input {
border-color: rgba(71, 85, 105, .16);
background: rgba(248, 251, 255, .86);
color: #172033;
}
body.light-mode .query-preview b { color: #0284c7; }
body.light-mode .generated-box {
border-color: rgba(14, 165, 233, .22);
background: rgba(224, 242, 254, .5);
}
body.light-mode .scenario-row-label {
background: rgba(14, 165, 233, .12);
color: #075985;
}
body.light-mode .sticky-column {
scrollbar-color: rgba(14, 165, 233, .42) rgba(148, 163, 184, .14);
}