:root{
  --bg:#f2f5f8; --card:#ffffff; --muted:#7b7f86; --accent:#007aff; --radius:14px;
}
html,body{height:100%;margin:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg);}

/* 响应式设计 - 改进手机适配 */
.iphone-shell{
  max-width:100%;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* 移动端适配与触控友好 */
:root {
  --container-max: 960px;
  --container-pad: 16px;
  --primary: #0d6efd;
}
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
button, input, select, textarea {
  font-size: 16px; /* 防止 iOS 缩放 */
}
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
}
.btn:active { opacity: .9; }

/* 视频与画布在窄屏的表现 */
video, canvas, img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 模态框在移动端全屏化 */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal.open { display: flex; }
.modal .card {
  background: #fff;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.modal .card-header, .modal .card-footer { padding: 12px 16px; }
.modal .card-body { padding: 8px 16px; }

/* 断点适配 */
@media (max-width: 768px) {
  .btn { width: 100%; }
  .container { padding: 0 12px; }
}

@media (max-width: 480px) {
  .container { padding: 0 10px; }
}

@media (min-width:480px) {
  .iphone-shell{
    max-width:480px;
    margin:0 auto;
    padding:12px;
  }
}

.ios-header{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  position:sticky;
  top:0;
  z-index:100;
}
.ios-header .status{font-weight:600}
.header-right{display:flex;gap:8px;align-items:center}
.lang-select{padding:6px 8px;border-radius:8px;border:1px solid #e6e9ee;background:white;color:#333;font-size:12px;cursor:pointer}
.app-body{padding:8px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.9), var(--card));border-radius:calc(var(--radius));padding:18px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.title{margin:0 0 12px 0;font-size:20px}
input{width:100%;padding:12px;margin:8px 0;border-radius:10px;border:1px solid #e6e9ee;box-sizing:border-box}
.ios-btn{display:inline-block;width:100%;padding:12px;border-radius:12px;border:none;background:#f4f6f8;color:#111;font-weight:600;margin-top:10px;box-shadow:inset 0 -2px 0 rgba(0,0,0,0.03)}
.ios-btn.primary{background:var(--accent);color:white}
.hidden{display:none}
.muted{color:var(--muted)}
.small{font-size:12px}
.seg{display:flex;gap:8px;margin:10px 0}
.seg .seg-item{flex:1;border-radius:12px;background:linear-gradient(180deg,#fff,#f0f3f7);}
.location-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:rgba(0,0,0,0.8);color:white;padding:12px 16px;border-radius:12px;z-index:9999;max-width:90%;word-wrap:break-word}

/* 触摸友好的按钮 */
.ios-btn{
  min-height:44px;
  font-size:16px;
}

/* 响应式表格 */
@media (max-width:480px) {
  .table-responsive{
    overflow-x:auto;
  }
  table{
    font-size:12px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0b0f;--card:#0f1113;--muted:#9aa0a6}
  .card{box-shadow:none}
  input{background:#1a1a1e;color:#fff;border-color:#333}
}