.mobile-shell{--m-primary:#0369a1;--m-text:#0f172a;--m-muted:#475569;--m-line:#e2e8f0;width:100%;max-width:480px;min-height:100dvh;margin:0 auto;background:#f8fafc;color:var(--m-text);font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;font-size:16px;line-height:1.5;color-scheme:light}
|
.mobile-shell *{box-sizing:border-box}.mobile-shell button,.mobile-shell input,.mobile-shell select{font:inherit}
|
.mobile-shell button,.mobile-shell a{touch-action:manipulation}.mobile-shell button{cursor:pointer}
|
.mobile-shell :focus-visible{outline:2px solid #0369a1;outline-offset:3px}
|
.m-header{height:56px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--m-line);background:white;position:sticky;top:0;z-index:20}
|
.m-header h1{font-size:20px;font-weight:650;margin:0;flex:1}.m-product{font-size:14px;font-weight:700;color:#475569}
|
.m-content{padding:16px;overflow-wrap:anywhere}.m-content.with-tabs{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
|
.m-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;min-height:64px;padding-bottom:env(safe-area-inset-bottom);background:white;border-top:1px solid var(--m-line);z-index:30}
|
.m-nav a{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;color:#475569;font-size:14px;text-decoration:none;min-height:64px}.m-nav a.router-link-active{color:#0369a1;font-weight:650}
|
.mobile-shell svg{width:24px;height:24px;flex-shrink:0}.m-icon-button{border:0;background:transparent;display:grid;place-items:center;width:44px;height:44px;color:inherit}
|
.m-panel{background:#fff;border:1px solid var(--m-line);border-radius:12px;padding:16px;margin-bottom:16px}
|
.m-muted{color:#475569;font-size:14px}.m-title{font-size:18px;font-weight:650;margin:0 0 12px}.m-section-title{font-size:18px;font-weight:650;margin:24px 0 12px}
|
.m-primary,.m-secondary{min-height:52px;border-radius:8px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-decoration:none;font-weight:600}
|
.m-primary{background:#0369a1;color:#fff;border:1px solid #0369a1}.m-secondary{background:white;color:#0369a1;border:1px solid #64748b}.mobile-shell button:disabled{background:#e2e8f0;color:#475569;border-color:#94a3b8;cursor:not-allowed}
|
.m-stack{display:grid;gap:12px}.m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
|
.m-feature{border-bottom:1px solid #e2e8f0;padding:16px 4px;display:flex;align-items:center;gap:12px;color:#0f172a;text-decoration:none;min-height:76px}.m-feature svg{color:#0369a1}.m-feature strong{display:block;font-weight:650}.m-feature small{color:#475569;font-size:14px}
|
.m-field{display:grid;gap:6px;margin-bottom:16px}.m-field>span,.m-field label{font-weight:550}
|
.m-field input,.m-field select,.m-input{width:100%;min-height:48px;border:1px solid #64748b;border-radius:8px;background:white;color:#0f172a;padding:10px 12px;min-width:0}.mobile-shell input::placeholder{color:#475569;opacity:1}
|
.m-error,.m-warning,.m-success{padding:12px;border-radius:8px;margin:12px 0;font-size:16px}.m-error{background:#fef2f2;color:#b91c1c}.m-warning{background:#fffbeb;color:#92400e}.m-success{background:#f0fdf4;color:#166534}
|
.m-row{padding:14px 0;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;gap:12px}.m-row:last-child{border-bottom:0}.m-row dt{color:#475569;flex-shrink:0}.m-row dd{margin:0;text-align:right;word-break:break-all}
|
.m-record{display:block;padding:16px 0;border-bottom:1px solid #e2e8f0}.m-record strong{font-size:18px}.m-record p{margin:4px 0}.m-status{display:inline-block;font-size:14px;font-weight:600;color:#475569}.m-status.success{color:#166534}.m-status.failed{color:#b91c1c}
|
.m-action-bar{position:sticky;bottom:0;background:#f8fafc;padding:12px 0 calc(12px + env(safe-area-inset-bottom));display:grid;gap:8px;z-index:10}
|
.m-empty{padding:32px 16px;text-align:center;color:#475569}.m-inline{display:flex;align-items:center;gap:12px}.m-inline>*{min-width:0}.m-link{color:#0369a1;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
|
.m-camera{width:100%;max-width:320px;aspect-ratio:1;object-fit:cover;display:block;margin:12px auto;background:#0f172a;border-radius:8px}.m-detail-toggle{background:none;border:0;color:#0369a1;min-height:44px;padding:8px 0}
|
@media(max-width:380px){.m-grid{gap:8px}.m-content{padding:12px}.m-feature{gap:8px}.m-header{padding:0 12px}}
|
.m-picker-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;border:1px solid #64748b;border-radius:8px;background:white;color:#0f172a;padding:10px 12px;text-align:left}
|
.m-picker-dialog{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:480px;max-height:85dvh;border:0;border-radius:16px 16px 0 0;padding:0;background:white;color:#0f172a;overflow:hidden}
|
.m-picker-dialog::backdrop{background:rgb(15 23 42 / 45%)}
|
.m-picker-body{padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;max-height:85dvh}
|
.m-picker-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.m-picker-header .m-title{margin:0}
|
.m-picker-options{overflow-y:auto;overscroll-behavior:contain;min-height:0}
|
.m-picker-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:12px 8px;border:0;border-bottom:1px solid #e2e8f0;background:white;color:#0f172a;text-align:left}
|
.m-picker-option[aria-pressed=true]{color:#0369a1;background:#f0f9ff;font-weight:600}.m-picker-option small{display:block;font-size:14px;color:#475569}
|
.mobile-shell textarea{font:inherit}.m-field textarea{width:100%;border:1px solid #64748b;border-radius:8px;background:white;color:#0f172a;padding:10px 12px;resize:vertical;min-height:96px}
|
.m-quality-indicator{min-width:0}.m-quality-indicator legend{font-weight:650;padding:0 6px}.m-quality-indicator .m-grid .m-field{margin-bottom:0}
|
.m-order-button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;text-align:left;background:white;color:#0f172a;border:1px solid #e2e8f0;border-radius:12px;padding:16px;margin-bottom:12px;min-height:88px}.m-order-button small{grid-column:1/-1;color:#475569;font-size:14px}.mobile-shell summary{min-height:44px;padding:10px 0;cursor:pointer;color:#0369a1}
|
