:root{
			--bg:#0f1115;
			--panel:#151822;
			--panel-2:#1b2030;
			--text:#e6e8ef;
			--muted:#9aa3b2;
			--accent:#7c4dff;
			--accent-2:#00e5ff;
			--danger:#ff5370;
			--ok:#64ffda;
			--radius:16px;
			--shadow:0 10px 30px rgba(0,0,0,.35);
		}
		*{box-sizing:border-box}
		html,body{height:100%}
		body{
			margin:0;
			background:
				radial-gradient(1200px 600px at 110% -10%, rgba(124,77,255,.15), transparent 60%),
				radial-gradient(1000px 500px at -10% 110%, rgba(0,229,255,.12), transparent 60%),
				linear-gradient(180deg, #0f1115 0%, #0b0d12 100%);
			color:var(--text);
			font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
			display:flex; align-items:center; justify-content:center; padding:24px;
		}
		.container{
			width:min(900px, 100%);
		}
		.header{
			display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:20px;
		}
		.brand{
			display:flex; align-items:center; gap:12px;
		}
		.logo{
			width:40px; height:40px; border-radius:12px;
			background:linear-gradient(135deg, var(--accent), var(--accent-2));
			box-shadow:0 8px 20px rgba(124,77,255,.35), inset 0 0 20px rgba(255,255,255,.12);
		}
		h1{
			margin:0;
			font-weight:800;
			letter-spacing:.3px;
			font-size:clamp(22px, 3vw, 28px);
			background:linear-gradient(90deg, #fff, #c9cffb);
			-webkit-background-clip:text; background-clip:text; color:transparent;
		}
		a{color:var(--ok); text-decoration:none}
		a:hover{text-decoration:underline}
		.card{
			background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
			border:1px solid rgba(255,255,255,.06);
			border-radius:var(--radius);
			box-shadow:var(--shadow);
			overflow:hidden;
		}
		.card .head{
			padding:18px 20px;
			border-bottom:1px solid rgba(255,255,255,.06);
			display:flex; align-items:center; justify-content:space-between; gap:12px;
		}
		.card .body{ padding:20px; }
		label{display:block; color:var(--muted); font-weight:600; margin:0 0 8px}
		.input-row{
			display:flex; gap:10px; flex-wrap:wrap;
			align-items:stretch;
		}
		input[type="text"]{
			flex:1 1 480px;
			background:#0d0f15;
			border:1px solid rgba(255,255,255,.08);
			color:var(--text);
			border-radius:12px; padding:14px 14px;
			outline:none;
			transition:border .15s ease, box-shadow .15s ease;
		}
		input[type="text"]::placeholder{color:#6f7787}
		input[type="text"]:focus{
			border-color:rgba(124,77,255,.7);
			box-shadow:0 0 0 4px rgba(124,77,255,.15);
		}
		.btn{
			appearance:none; cursor:pointer;
			border:none; border-radius:12px; padding:12px 16px;
			font-weight:700; letter-spacing:.3px;
			background:linear-gradient(135deg, var(--accent) 0%, #5a36ff 100%);
			color:white;
			box-shadow:0 8px 18px rgba(124,77,255,.35);
			transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
		}
		.btn:hover{filter:brightness(1.05)}
		.btn:active{transform:translateY(1px)}
		.kbd{
			display:inline-block;
			padding:.2em .5em;
			border-radius:.4em;
			border:1px solid rgba(255,255,255,.15);
			background:#0b0d12;
			font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
			font-size:.88em;
			color:#cde3ff;
		}
		.footer{
			margin-top:18px; color:var(--muted); font-size:.95rem;
			display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
		}
		.result{
			margin-top:18px;
			padding:14px 16px;
			border-radius:12px;
			background:#0b0d12;
			border:1px solid rgba(255,255,255,.08);
			font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
			white-space:pre-wrap; word-break:break-word;
		}
		.result-title{
			margin:24px 0 8px; font-size:1.1rem; color:#cfd7ff; font-weight:700;
		}
		.actions{ display:flex; gap:8px; }
		.btn-secondary{
			background:#212633; color:#dce3f7; font-weight:600;
			box-shadow:none; border:1px solid rgba(255,255,255,.08);
		}
		.notice{
			margin-top:8px; font-size:.92rem; color:#a7b1c3;
		}