/* XFileSharing mod pages */
.mod{font-size:16px;line-height:1.6;color:#2b2b2b}
.mod h3{font-size:24px;margin:44px 0 6px;color:#16324a}
.mod p{margin:8px 0 12px}
.mod .lead{font-size:19px;line-height:1.55;color:#3b4a57;margin:6px 0 20px}
.mod .badges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.mod .badge{background:#eaf2f9;color:#20659c;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:bold}
.mod .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0}
.mod .card{border:1px solid #dfe7ee;border-radius:10px;padding:18px 20px;background:#fff;display:flex;gap:14px}
.mod .card svg{flex:0 0 40px;width:40px;height:40px}
.mod .card>div>b{display:block;color:#16324a;margin-bottom:2px}
.mod .card span{color:#5a6772;font-size:15px;line-height:1.5}
.mod figure{margin:20px 0 8px;border:1px solid #d9e2ea;border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(22,50,74,.12);background:#fff}
.mod figure .bar{height:28px;background:#eef2f6;border-bottom:1px solid #d9e2ea;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:12px;color:#7b8895}
.mod figure .bar i{width:10px;height:10px;border-radius:50%;background:#cfd8e0;display:inline-block}
.mod figure .bar span{margin-left:8px}
.mod figure img{display:block;width:100%;height:auto;box-shadow:none;margin:0 auto}
.mod figcaption{padding:10px 16px;font-size:14px;color:#5a6772;border-top:1px solid #e6edf3;background:#fafcfe}
.mod .tag{display:inline-block;font-size:12px;font-weight:bold;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:2px 8px;margin-right:8px}
.mod .tag.u{background:#e4f5ec;color:#1b7a4a}
.mod .tag.a{background:#fdeee0;color:#b4560b}
.mod .diagram{margin:18px 0;border:1px solid #dfe7ee;border-radius:10px;background:#f6f9ff;padding:14px}
.mod .diagram svg{width:100%;height:auto;display:block}
.mod .dcap{font-size:13px;color:#5a6772;text-align:center;margin-top:6px}
.mod .steps{counter-reset:s;list-style:none;padding:0;margin:14px 0}
.mod .steps li{counter-increment:s;position:relative;padding:4px 0 10px 46px}
.mod .steps li:before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:#20659c;color:#fff;text-align:center;line-height:32px;font-weight:bold}
.mod .note{background:#f6f9ff;border-left:4px solid #20659c;padding:12px 16px;border-radius:0 8px 8px 0;margin:18px 0;color:#3b4a57}
.mod .chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.mod .chips span{background:#fff;border:1px solid #dfe7ee;border-radius:8px;padding:6px 12px;font-size:14px;color:#16324a}
.mod .tblwrap{overflow-x:auto;margin:14px 0}
.mod .mtbl{border-collapse:collapse;width:100%;font-size:15px}
.mod .mtbl th{text-align:left;background:#eaf2f9;color:#16324a;padding:9px 12px;border-bottom:2px solid #cfe0ee}
.mod .mtbl td{padding:9px 12px;border-bottom:1px solid #e6edf3;vertical-align:top}
.mod code{background:#eef2f6;border-radius:4px;padding:1px 6px;font-size:14px}
.mod pre{background:#0f2233;color:#d8e6f2;border-radius:8px;padding:14px 16px;overflow-x:auto;font-size:13.5px;line-height:1.5}
.mod .mod-buy{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:46px 0 10px;padding:20px 24px;border-radius:12px;background:#16324a;color:#fff}
.mod .mod-buy b{display:block;font-size:18px}
.mod .mod-buy span{color:#bcd0e0;font-size:14px}
.mod .mod-buy code{background:rgba(255,255,255,.14);color:#fff}
.mod .mod-buy .mb-r{display:flex;align-items:center;gap:16px}
.mod .mod-buy .price{font-size:26px;font-weight:bold;color:#fff}
.mod .mod-buy .btn{background:#20659c;color:#fff;border-radius:6px;padding:10px 20px;text-decoration:none;font-weight:bold}
.mod .mod-buy .btn:hover{background:#2a7ab9}
.mod .cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.mod .diagram{overflow-x:auto}.mod .diagram svg{min-width:620px}.mod .grid,.mod .cols2{grid-template-columns:1fr}.mod h3{font-size:21px}.mod .mod-buy{padding:16px}}

.mod .shots{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:18px 0 8px;align-items:flex-start}
.mod .shots figure{margin:0;flex:0 1 auto;max-width:100%}
.mod .shots img{width:auto;max-width:100%;height:auto}