:root{
	--bg:#0b1220;
	--muted:#93a4c7;
	--text:#e9efff;
	--border:rgba(255,255,255,.12);
	--shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}

body{
	margin:0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial, sans-serif;
	background: radial-gradient(1200px 600px at 20% 10%, rgba(106,167,255,.20), transparent 55%),
				radial-gradient(900px 500px at 80% 30%, rgba(102,227,161,.16), transparent 55%),
				var(--bg);
	color:var(--text);
	min-height:100vh;
	padding:28px 16px;
}
.container{
	max-width: 980px;
	margin: 0 auto;
}
.tabs{
	display:flex;
	gap:14px;
	align-items:flex-end;
	border-bottom: 1px solid var(--border);
	padding: 0 2px;
	margin: 10px 0 16px 0;
}

.tabs .tab{
	position:relative;
	padding: 10px 10px 12px 10px;
	color: var(--muted);
	text-decoration:none;
	font-weight: 700;
	letter-spacing: .2px;
	border-radius: 12px 12px 0 0;
	transition: color .15s ease, background .15s ease;
}

.tabs .tab:hover{
	color: var(--text);
	background: rgba(255,255,255,.04);
}

/* active (base) */
.tabs .tab.is-active{
	color: var(--text);
	background: rgba(255,255,255,.06);
}

.tabs .tab.is-active::after{
	content:"";
	position:absolute;
	left:10px;
	right:10px;
	bottom:-1px;
	height:3px;
	border-radius: 999px;
	background: rgba(106,167,255,.9);
}

/* =========================
	 Instrument color themes (stronger selector)
	 ========================= */

/* NCD : Green */
.tabs .tab.tab-ncd.is-active{
	color:#eafff4;
	background: rgba(102, 227, 161, 0.22);
	border: 1px solid rgba(102, 227, 161, 0.35);
	box-shadow: 0 10px 24px rgba(102, 227, 161, 0.12);
}
.tabs .tab.tab-ncd.is-active::after{
	background: rgba(102, 227, 161, 0.98);
}
.tabs .tab.tab-ncd:hover{
	color:#eafff4;
	background: rgba(102, 227, 161, 0.14);
}

/* Repo : Orange */
.tabs .tab.tab-repo.is-active{
	color:#fff3e6;
	background: rgba(255, 170, 90, 0.22);
	border: 1px solid rgba(255, 170, 90, 0.35);
	box-shadow: 0 10px 24px rgba(255, 170, 90, 0.12);
}
.tabs .tab.tab-repo.is-active::after{
	background: rgba(255, 170, 90, 0.98);
}
.tabs .tab.tab-repo:hover{
	color:#fff3e6;
	background: rgba(255, 170, 90, 0.14);
}

/* T-Bond : Blue */
.tabs .tab.tab-tbond.is-active{
	color:#e9f1ff;
	background: rgba(90, 140, 255, 0.22);
	border: 1px solid rgba(90, 140, 255, 0.35);
	box-shadow: 0 10px 24px rgba(90, 140, 255, 0.12);
}
.tabs .tab.tab-tbond.is-active::after{
	background: rgba(90, 140, 255, 0.98);
}
.tabs .tab.tab-tbond:hover{
	color:#e9f1ff;
	background: rgba(90, 140, 255, 0.14);
}

/* Haircut : Purple */
.tabs .tab.tab-haircut.is-active{
	color:#f3e9ff;
	background: rgba(180, 120, 255, 0.22);
	border: 1px solid rgba(180, 120, 255, 0.35);
	box-shadow: 0 10px 24px rgba(180, 120, 255, 0.12);
}
.tabs .tab.tab-haircut.is-active::after{
	background: rgba(180, 120, 255, 0.98);
}
.tabs .tab.tab-haircut:hover{
	color:#f3e9ff;
	background: rgba(180, 120, 255, 0.14);
}

/* FX Swap : Cyan / Teal */
.tabs .tab.tab-fxswap.is-active{
	color:#e9fcff;
	background: rgba(90, 220, 255, 0.22);
	border: 1px solid rgba(90, 220, 255, 0.35);
	box-shadow: 0 10px 24px rgba(90, 220, 255, 0.12);
}

.tabs .tab.tab-fxswap.is-active::after{
	background: rgba(90, 220, 255, 0.98);
}

.tabs .tab.tab-fxswap:hover{
	color:#e9fcff;
	background: rgba(90, 220, 255, 0.14);
}
/*++++++++++++++++++++ End of Tabs ++++++++++++++++++++++ */

header{
	margin-bottom: 18px;
}
h1{
	font-size: 22px;
	margin: 0 0 6px 0;
	letter-spacing: .2px;
}
.version {
	font-size: 0.75rem;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--muted, #93a4c7);
	border: 1px solid rgba(255, 255, 255, 0.15);
	letter-spacing: 0.5px;	
}
.version.dev_mode {
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 6px;
    margin-left: 6px;
    background: rgba(255, 120, 120, 0.18);
    border: 1px solid rgba(255, 120, 120, 0.35);
    color: #ffdede;
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.25);
}
.subtitle{
	margin:0;
	color:var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

.grid{
	display:grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 16px;
}
@media (max-width: 860px){
	.grid{grid-template-columns: 1fr;}
}

.card{
	background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
	border:1px solid var(--border);
	border-radius: 16px;
	padding: 16px;
	box-shadow: var(--shadow);
}
.card h2{
	font-size: 15px;
	margin: 0 0 12px 0;
	color: #dfe9ff;
}

.form{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 560px){
	.form{grid-template-columns: 1fr;}
}

label{
	display:block;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 6px;
}

.roundToggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  font-size:12px;
  opacity:0.9;
  cursor:pointer;
  user-select:none;
}

.roundToggle input{
  transform: translateY(1px);
}

input, select{
	width:100%;
	background: rgba(10,16,30,.6);
	color: var(--text);
	border:1px solid var(--border);
	border-radius: 12px;
	padding: 10px 12px;
	outline:none;
	transition: border .15s ease, box-shadow .15s ease, transform .05s ease;
}
input:focus{
	border-color: rgba(106,167,255,.65);
	box-shadow: 0 0 0 3px rgba(106,167,255,.18);
}

.group{
	grid-column: 1 / -1;
	display:flex;
	align-items:center;
	gap: 10px;
	flex-wrap: wrap;

	margin-top: 10px;
	padding: 10px 10px 8px 10px;

	font-size: 12px;
	font-weight: 800;
	letter-spacing: .25px;
	text-transform: uppercase;

	color: #dfe9ff;
	border: 1px solid var(--border);
	border-radius: 12px;

	background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.hint{
	grid-column: 1 / -1;
	display:flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
	color: var(--muted);
	font-size: 12px;
}
.pill{
	border:1px solid var(--border);
	border-radius: 999px;
	padding: 6px 10px;
	background: rgba(255,255,255,.03);
}

.replace_input {
	display:inline-block; 
	margin-top: 4px;
	border:1px solid var(--border);
	border-radius: 999px;
	padding: 6px 10px;
	background: rgba(255,255,255,.03);
}

.actions{
	grid-column: 1 / -1;
	display:flex;
	gap: 10px;
	align-items:center;
	margin-top: 6px;
}
button{
	appearance:none;
	border:none;
	border-radius: 12px;
	padding: 10px 14px;
	font-weight: 650;
	cursor:pointer;
	transition: transform .05s ease, filter .15s ease, box-shadow .15s ease;
}
button:active{transform: translateY(1px)}
.btn-primary{
	background: linear-gradient(180deg, rgba(106,167,255,1), rgba(90,140,255,1));
	color:#071023;
	box-shadow: 0 8px 20px rgba(106,167,255,.22);
}
.btn-primary:hover{filter: brightness(1.1)}
.btn-ghost{
	background: rgba(255,255,255,.05);
	color: var(--text);
	border:1px solid var(--border);
}
.btn-ghost:hover{
	background: rgba(255,255,255,.08);
}

.msg{
	font-size: 12px;
	margin-left:auto;
	color: var(--muted);
}

.error{
	grid-column: 1 / -1;
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255,106,106,.35);
	background: rgba(255,106,106,.10);
	color: #ffd5d5;
	display:none;
	white-space: pre-line;
}

.results{
	display:grid;
	gap: 12px;
}
.kpi{
	border:1px solid var(--border);
	border-radius: 14px;
	background: rgba(255,255,255,.03);
	padding: 12px;
}
.kpi .label{
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 6px;
}
.kpi .value{
	font-size: 22px;
	font-weight: 750;
	letter-spacing: .2px;
}
.kpi .unit, .kpi .unit_dummy, .kpi .outMemo {
	font-size: 12px;
	color: var(--muted);
	margin-left: 6px;
	font-weight: 600;
}
.details{
	border:1px solid var(--border);
	border-radius: 14px;
	background: rgba(255,255,255,.03);
	padding: 12px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
}
.details code{
	color:#dfe9ff;
	background: rgba(255,255,255,.06);
	padding: 2px 6px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.10);
}
footer{
	margin-top: 14px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
}
.small{
	font-size: 11px;
	opacity: .95;
}
.hidden {
	display: none;
}
.locked {
	opacity: 0.45;
	pointer-events: none;
}
.locked input,
.locked select {
	background-color: rgba(255,255,255,0.08);
	color: #9aa4c7;
	cursor: not-allowed;
}
.dev_mode {
	display: none;
}

/* ================================
	 Radio Group (Calculation Mode)
	 ================================ */

.radio-group{
	grid-column: 1 / -1; /* フォーム全幅を使う */
	display: grid;
	grid-template-columns: 1fr 1fr; /* 常に横2枚 */
	gap: 14px;
}

.radio-card{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.03);
	cursor: pointer;
	transition: all .2s ease;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* hide native radio */
.radio-card input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* hover */
.radio-card:hover{
	transform: translateY(-1px);
	border-color: rgba(106,167,255,.55);
}

/* checked state */
.radio-card:has(input:checked){
	border-color: #6aa7ff;
	background: linear-gradient(
		180deg,
		rgba(106,167,255,.20),
		rgba(106,167,255,.05)
	);
	box-shadow: 0 0 0 1px rgba(106,167,255,.35),
				0 10px 26px rgba(0,0,0,.45);
}

/* title */
.radio-card .title{
	font-weight: 600;
	color: var(--text);
}

/* description */
.radio-card .desc{
	font-size: 0.85rem;
	color: var(--muted);
}

/* small check indicator (optional) */
.radio-card::after{
	content: "✓";
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 0.9rem;
	color: #6aa7ff;
	opacity: 0;
	transition: opacity .15s ease;
}

.radio-card:has(input:checked)::after{
	opacity: 1;
}