:root{
	--accent:#f97316;
	--accent-soft:#fffbf7;
	--bg:#f9fafb;
	--card:#ffffff;
	--line:#e5e7eb;
	--text:#111827;
	--muted:#6b7280;
	--subtle:#9ca3af;
	--success-bg:#d1fae5;
	--success-line:#6ee7b7;
	--success-text:#065f46;
}

*{box-sizing:border-box}

body{
	margin:0;
	font-family:'Noto Sans TC',Arial,sans-serif;
	background:var(--bg);
	color:var(--text);
}

.sg-page{
	min-height:100vh;
	max-width:100%;
	margin:0 auto;
	background:var(--bg);
}

.sg-statusbar{
	height:44px;
	padding:0 28px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:#fff;
	font-size:16px;
}

.sg-statusbar__icons{
	display:flex;
	align-items:center;
	gap:5px;
}

.sg-statusbar__icons span{
	display:block;
	width:15px;
	height:11px;
	border:1.6px solid var(--text);
	border-radius:3px;
}

.sg-statusbar__icons .battery{
	width:22px;
	position:relative;
}

.sg-statusbar__icons .battery::after{
	content:"";
	position:absolute;
	top:3px;
	right:-3px;
	width:2px;
	height:4px;
	background:var(--text);
	border-radius:0 2px 2px 0;
}

.sg-header{
	height:51px;
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 16px 13px;
	position:sticky;
	top:0;
	z-index:5;
	background:#fff;
	border-bottom:1px solid var(--line);
}

.sg-back{
	width:22px;
	height:22px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 22px;
}

.sg-back img{width:22px;height:22px;display:block}

.sg-header h1{
	margin:0;
	font-size:16px;
	line-height:1.3;
	font-weight:700;
}

.sg-main{
	padding:16px 16px 108px;
}

.sg-banner{
	display:flex;
	gap:8px;
	align-items:flex-start;
	padding:13px 15px;
	border:1px solid #fed7aa;
	border-radius:10px;
	background:#fef3e2;
}

.sg-banner__icon{font-size:16px;line-height:1}

.sg-banner p{
	margin:0;
	color:#92400e;
	font-size:12px;
	line-height:1.5;
}

.sg-form{
	display:flex;
	flex-direction:column;
	gap:16px;
	margin-top:16px;
}

.sg-message{
	margin-top:16px;
	padding:12px 14px;
	border-radius:12px;
	background:#fef2f2;
	color:#dc2626;
	font-size:13px;
	line-height:1.6;
}

.hidden{
	display:none;
}

.sg-card{
	padding:15px;
	border:1px solid var(--line);
	border-radius:12px;
	background:var(--card);
}

.sg-label{
	display:block;
	margin-bottom:8px;
	color:#374151;
	font-size:12px;
	line-height:1.4;
	font-weight:700;
}

.sg-label span{color:var(--accent)}

.sg-input,
.sg-select,
.sg-textarea{
	width:100%;
	border:1px solid var(--line);
	border-radius:8px;
	padding:11px 13px;
	background:#fff;
	color:var(--text);
	font:400 13px/1.4 'Noto Sans TC',Arial,sans-serif;
}

.sg-input.is-highlight{
	border-color:var(--accent);
	background:var(--accent-soft);
}

.sg-input--muted{color:var(--muted)}

.sg-chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.sg-chip{
	padding:6px 14px;
	border:0;
	border-radius:20px;
	background:#f3f4f6;
	color:#374151;
	font-size:12px;
	line-height:1.35;
}

.sg-chip.is-selected{
	background:var(--accent);
	color:#fff;
	font-weight:700;
}

.sg-chip.is-success.is-selected{
	background:var(--success-bg);
	color:var(--success-text);
	box-shadow:inset 0 0 0 1px var(--success-line);
}

.sg-switch{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:0;
	padding:3px;
	border-radius:10px;
	background:#f3f4f6;
}

.sg-switch button{
	border:0;
	border-radius:8px;
	padding:7px;
	background:transparent;
	color:var(--muted);
	font-size:12px;
	line-height:1.4;
}

.sg-switch button.is-selected{
	background:#fff;
	color:var(--accent);
	font-weight:700;
	box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.sg-grid-two{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}

.sg-select{
	appearance:none;
	background-image:linear-gradient(45deg,transparent 50%,#9ca3af 50%),linear-gradient(135deg,#9ca3af 50%,transparent 50%);
	background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);
	background-size:5px 5px,5px 5px;
	background-repeat:no-repeat;
}

.sg-textarea{
	min-height:64px;
	resize:none;
	color:var(--muted);
	line-height:1.6;
}

.sg-counter{
	margin-top:8px;
	color:var(--subtle);
	font-size:11px;
	line-height:1.4;
	text-align:right;
}

.sg-footer{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	max-width:100%;
	margin:0 auto;
	padding:13px 16px 24px;
	background:#fff;
	border-top:1px solid var(--line);
}

.sg-submit{
	width:100%;
	border:0;
	border-radius:24px;
	padding:14px;
	background:var(--accent);
	color:#fff;
	font-size:15px;
	line-height:1.4;
	font-weight:700;
}

.sg-note{
	margin-top:8px;
	color:var(--subtle);
	font-size:11px;
	line-height:1.4;
	text-align:center;
}

@media (max-width:380px){
	.sg-grid-two{grid-template-columns:1fr}
}

@media (min-width:768px){
	body{
		padding:0;
		background:#ffffff;
	}

	.sg-page{
		width:100%;
		max-width:none;
		border-radius:0;
		overflow:visible;
		box-shadow:none;
	}

	.sg-footer{
		left:50%;
		right:auto;
		width: calc(100vw - 32px);
		max-width: 960px;
		max-width:none;
		transform:translateX(-50%);
	}
}

.sg-autocomplete-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	z-index: 10;
	max-height: 200px;
	overflow-y: auto;
}

.sg-autocomplete-item {
	padding: 12px 16px;
	cursor: pointer;
	border-bottom: 1px solid var(--line);
}

.sg-autocomplete-item:last-child {
	border-bottom: none;
}

.sg-autocomplete-item:hover {
	background: var(--bg);
}

.sg-autocomplete-results.hidden {
	display: none;
}