@font-face {
  font-family: "Open Sans";
  src: url("/static/open-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  font-family: "Open Sans", Arial, sans-serif;
  font-synthesis: none;
  color: #444;
  background: #fff;
  --blue: #005196;
  --blue-hover: #063d84;
  --line: #e5e5e5;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-size: 14px; line-height: 1.65; }
.site-width { width: calc(100% - 64px); max-width: 1140px; margin: 0 auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid #8fbade; outline-offset: 4px; }
.utility { background: var(--blue); border-bottom: 1px solid #ffffff30; font-size: 11px; color: #fff; }
.utility .site-width { display: flex; justify-content: space-between; padding: 8px 0; gap: 16px; }
.utility span span { color: #ffffff80; margin: 0 8px; }
.masthead { background: var(--blue); color: #fff; }
.masthead .site-width { display: flex; align-items: center; gap: 30px; min-height: 100px; }
.brand { display: inline-flex; flex: 0 0 auto; padding: 14px 0; background: var(--blue); }
.brand img { display: block; width: 150px; height: 28px; }
.tool-name { border-left: 1px solid #ffffff60; padding-left: 30px; font-size: 16px; font-weight: 300; }
.local { margin-left: auto; font-size: 12px; color: #fff; white-space: nowrap; }
.local::before { content: ""; display: inline-block; width: 6px; height: 6px; background: #fff; margin: 0 9px 2px 0; }
.section-nav { background: var(--blue); border-top: 1px solid #ffffff30; border-bottom: 1px solid var(--blue); }
.section-nav .site-width { display: flex; gap: 38px; }
.section-nav a { padding: 15px 0 13px; border-bottom: 2px solid transparent; color: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.section-nav a:hover { color: #fff; border-bottom-color: #fff; }
.intro { background: #f5f5f5; border-bottom: 1px solid #ededed; padding: 0 0 48px; }
.breadcrumb { margin: 0 0 30px; padding-top: 17px; color: #777; font-size: 11px; }
.breadcrumb span { padding: 0 10px; color: #aaa; }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: 1px; }
h1 { margin: 0 0 16px; color: var(--blue); font-size: clamp(32px, 4vw, 46px); font-weight: 300; line-height: 1.3; letter-spacing: -.7px; }
.subtitle { max-width: 660px; margin: 0; color: #666; font-size: 16px; font-weight: 400; line-height: 1.8; }
main { padding-top: 32px; padding-bottom: 56px; }
.notice { padding: 20px 25px; border-left: 3px solid var(--blue); background: #f5f8fb; margin-bottom: 20px; }
.notice strong { color: var(--blue); font-size: 14px; font-weight: 600; }
.notice p { margin: 7px 0 0; max-width: 930px; font-size: 13px; line-height: 1.8; color: #666; }
.card { padding: 34px 0; border-bottom: 1px solid var(--line); }
.section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.number { color: var(--blue); font-size: 13px; font-weight: 600; padding-right: 16px; border-right: 1px solid #ccc; }
h2 { margin: 0; color: #333; font-size: 25px; font-weight: 300; line-height: 1.4; scroll-margin-top: 30px; }
.card > p { color: #666; font-size: 14px; line-height: 1.8; }
label { display: block; margin: 24px 0 9px; color: #444; font-size: 13px; font-weight: 600; }
.connection { display: flex; align-items: stretch; gap: 15px; max-width: 860px; }
input, select { flex: 1; min-width: 0; max-width: 100%; border: 1px solid #ccc; background: #fff; border-radius: 2px; padding: 12px 15px; color: #444; font: 16px "Open Sans", Arial, sans-serif; }
input:focus { outline: 2px solid #c4d9eb; outline-offset: 1px; border-color: var(--blue); }
button { display: inline-block; min-height: 46px; padding: 10px 25px; border: 1px solid var(--blue); border-radius: 2px; background: var(--blue); color: #fff; font: 600 12px/22px "Open Sans", Arial, sans-serif; text-transform: uppercase; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
button:hover:not(:disabled) { background: var(--blue-hover); border-color: var(--blue-hover); }
button.secondary { background: #fff; color: var(--blue); }
button.secondary:hover:not(:disabled) { background: #edf3f8; }
button:disabled { background: #efefef; border-color: #e1e1e1; color: #929292; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 23px; }
.hint { color: #777 !important; font-size: 12px !important; line-height: 1.8; }
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 24px 0 18px; }
.packages:empty { display: none; }
.package { padding: 20px 23px; background: #f5f5f5; border-top: 2px solid var(--blue); }
.package strong { display: block; color: var(--blue); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.package span { color: #444; font-size: 14px; overflow-wrap: anywhere; }
.package small { display: block; margin-top: 7px; color: #777; font-size: 11px; }
ul { padding-left: 18px; color: #666; font-size: 12px; line-height: 1.9; }
ul:empty { display: none; }
.activity { margin-top: 24px; padding: 25px; background: #f5f5f5; border: 0; }
.activity h2 { color: var(--blue); font-size: 20px; }
#progress { font-size: 13px; font-weight: 600; }
#events { max-height: 240px; overflow: auto; overflow-wrap: anywhere; margin-bottom: 0; padding-left: 20px; color: #666; font-size: 12px; line-height: 1.9; }
.error { color: #a13a34 !important; }
[hidden] { display: none !important; }
.app-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 26px; }
.app-columns > div { min-width: 0; }
.app-columns h3 { color: var(--blue); font-size: 18px; font-weight: 400; }
.app-columns input, .app-columns select { display: block; width: 100%; }
.app-columns input[type="file"] { font-size: 13px; padding: 12px; }
.apk-preview { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: #666; padding: 15px; background: #f5f5f5; }
.pair-code { color: var(--blue); font-size: 24px; letter-spacing: 4px; white-space: nowrap; }
.pairing { border-left: 3px solid var(--blue); padding: 24px; background: #f5f8fb; margin-bottom: 24px; }
.mobile-access { padding-top: 0; }
.search-controls { display: grid; grid-template-columns: minmax(0,1fr) 210px auto; gap: 15px; }
.catalog-sources { display: grid; gap: 9px; margin-top: 20px; }
.catalog-source { font-size: 12px; color: #666; padding: 10px 14px; background: #f5f5f5; }
.catalog-source a { margin-right: 12px; font-weight: 600; }
.catalog-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.catalog-result { padding: 20px; border: 1px solid var(--line); border-top: 2px solid var(--blue); min-width: 0; }
.catalog-result h3 { font-size: 16px; font-weight: 400; margin: 0 0 8px; color: #444; overflow-wrap: anywhere; }
.catalog-result p { font-size: 11px; color: #777; margin: 0 0 13px; }
.catalog-result a { font-size: 12px; font-weight: 600; }
.img-downloads:not(:empty) { margin-top: 28px; padding: 22px; background: #f5f8fb; border-left: 3px solid var(--blue); }
.img-downloads h3 { margin-top: 0; color: var(--blue); font-size: 18px; font-weight: 400; }
.button-link { display: inline-block; padding: 11px 20px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; border-radius: 2px; }
.button-link:hover { background: var(--blue-hover); color: #fff; }
footer { padding: 40px 0; border-top: 1px solid var(--line); background: #f5f5f5; }
footer .site-width { display: flex; align-items: center; gap: 38px; }
footer img { width: 150px; height: 52px; object-fit: contain; padding: 12px 15px; background: var(--blue); }
footer strong { font-size: 12px; font-weight: 600; color: #4c4c4c; }
footer p { margin: 4px 0 0; color: #777; font-size: 11px; }
footer a { margin-left: auto; font-size: 12px; }
footer a span { margin-left: 8px; }
@media (max-width: 700px) {
  .site-width { width: calc(100% - 36px); }
  .utility { font-size: 9px; }
  .masthead .site-width { min-height: 85px; gap: 15px; flex-wrap: wrap; padding: 19px 0; }
  .tool-name { display: none; }
  .local { font-size: 11px; }
  .section-nav .site-width { gap: 0 20px; flex-wrap: wrap; }
  .section-nav a { font-size: 10px; min-height: 44px; }
  .intro { padding-bottom: 32px; }
  .breadcrumb { margin-bottom: 24px; }
  .subtitle { font-size: 14px; }
  main { padding-top: 23px; padding-bottom: 36px; }
  .notice { padding: 17px 19px; }
  .card { padding: 28px 0; }
  h2 { font-size: 23px; }
  .connection { flex-direction: column; }
  .connection input { min-height: 46px; }
  .packages { grid-template-columns: 1fr; gap: 12px; }
  .actions button { width: 100%; }
  .activity { padding: 21px 18px; }
  .app-columns { grid-template-columns: 1fr; gap: 25px; }
  .search-controls, .catalog-results { grid-template-columns: 1fr; }
  .app-columns button { width: 100%; }
  .img-downloads .button-link { width: 100%; text-align: center; }
  button { min-height: 48px; }
  .pairing { padding: 20px 16px; }
  footer .site-width { flex-wrap: wrap; gap: 20px; }
  footer img { width: 150px; }
  footer a { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button { transition: none; }
}
.icon-editor { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr); gap:40px; }
[hidden] { display:none !important; }
#technical-dialog { width:min(440px,calc(100% - 32px)); padding:28px; border:0; border-radius:4px; box-shadow:0 12px 60px #0004; }
#technical-dialog::backdrop { background:#001c3a99; }
#technical-dialog input { width:100%; }
#technical-error { color:#a51e2c; }
.icon-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.icon-editor input:not([type=checkbox]), .icon-editor select, .icon-history select { width:100%; }
.icon-editor input[type=range] { min-height:36px; padding:0; accent-color:var(--blue,#0064ad); }
.icon-editor input[type=color] { height:46px; padding:4px; }
.check-row { display:flex; align-items:center; gap:10px; margin:18px 0; }
.check-row input { width:20px; height:20px; flex:0 0 auto; }
.icon-preview-panel h3 { margin-top:0; }
.monitor-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:230px; padding:22px; background:#eceff3; border:1px solid #d8e0e7; }
#icon-canvas { width:147px; height:147px; background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 50% / 16px 16px; }
#icon-label { max-width:100%; overflow-wrap:anywhere; text-align:center; font-size:14px; }
.icon-preview-panel .notice { margin-top:24px; }
.icon-history { margin-top:32px; padding-top:20px; border-top:1px solid #d8e0e7; }
.icon-editor output { float:right; font-weight:400; }
@media(max-width:700px) { .icon-editor { grid-template-columns:1fr; gap:26px; } .icon-fields { grid-template-columns:1fr; gap:0; } .icon-editor button,.icon-history button { width:100%; } }