* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: #f5f6f8; color: #1a1a1a; }
a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { background: #1a1a1a; color: #fff; padding: .8rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar .brand { font-weight: 600; font-size: 1.1rem; }
.topbar .brand a { color: #fff; }
.topbar nav { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; flex: 1; }
.topbar nav a { color: #ccc; padding: .4rem .7rem; border-radius: 6px; font-size: .9rem; }
.topbar nav a:hover { background: #333; text-decoration: none; }
.topbar nav a.active { background: #1a73e8; color: #fff; }
.topbar .spacer { flex: 1; }
.sync-btn { background: #2a2a2a; color: #ddd; border: 1px solid #444; padding: .4rem .7rem; border-radius: 6px; cursor: pointer; font-size: .85rem; }
.sync-btn:hover { background: #1a73e8; border-color: #1a73e8; color: #fff; }

.container { max-width: 1400px; margin: 1.5rem auto; padding: 0 1.5rem; }

table { width: 100%; background: #fff; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
th, td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid #eee; font-size: .9rem; }
th { background: #fafafa; font-weight: 600; color: #555; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; }
tr:last-child td { border-bottom: none; }
.right { text-align: right; }
.empty { text-align: center; color: #999; padding: 2rem; }

.badge { display: inline-block; padding: .15rem .55rem; border-radius: 4px; font-size: .75rem; font-weight: 500; }
.badge-shopify { background: #e6f5ea; color: #008060; }
.badge-medusa { background: #f3e6ff; color: #6e35d8; }
.badge-ebay { background: #fff6d6; color: #b07700; }
.badge-manual { background: #eee; color: #555; }

.btn { display: inline-block; padding: .4rem .8rem; border-radius: 6px; font-size: .85rem; border: none; cursor: pointer; font-weight: 500; }
.btn-primary { background: #1a73e8; color: #fff; }
.btn-primary:hover { background: #1558b8; text-decoration: none; }

.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card { background: #fff; border-radius: 8px; padding: 1rem 1.2rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: #666; margin: 0 0 .8rem; }
.card.span-2 { grid-column: span 2; }
.addr { line-height: 1.5; font-size: .95rem; }
form .row { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; }
form label { display: flex; flex-direction: column; font-size: .8rem; color: #666; gap: .3rem; }
form input { padding: .45rem .6rem; border: 1px solid #ddd; border-radius: 6px; font-size: .95rem; width: 100px; }

#rates table.rates { margin-top: 1rem; }