@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&display=swap');

* { border:0px; list-style:none; margin:0px; padding:0px; outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html { font-size: 100%; }
body,td,th { font-family: "Afacad", sans-serif; font-size: 13px; color: #222; }
body { margin:0px; background:#f0f0f0; letter-spacing:0.1em; }
h1, h2, h3 { margin:0px; color:#222; font-weight:500; }
h2 { margin-bottom:20px; font-size:17px; font-weight:500; }
a { text-decoration:none; color:var(--link); outline:none; font-weight:bold; }
a:hover { text-decoration:none; color:#333; }
img.scale { width:100%; height:auto; }
form .row { margin-bottom:10px; }
input, select, button, .btn { height:38px; line-height:20px; }
input, select, textarea { width:100%; font-family: "Afacad", sans-serif; font-size: 14px; color: #333333; background:#FFF; border:1px solid #BBB; padding:7px; border-radius:1px; transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; }
:focus { border-color:#888; }
.btn i { margin-right:5px; }
.btn:hover { text-decoration:none; }
.btn-search, .btn-close { background:none; width:50px; border:0px; color:#333; }
.btn-search:hover, .btn-close:hover { opacity:0.5;  background:none; color:#000; }
input[type=submit], input[type=button], button, .btn { font-family: 'Open Sans', sans-serif; border:0px; border-bottom:2px solid var(--bg-button-text-hover); cursor:pointer; padding:6px 15px; text-align:center; display:inline-block; font-weight:bold; background:var(--bg-button); color:var(--bg-button-text); font-size:13px; line-height: 26px; }
input[type=submit]:hover, input[type=button]:hover, .btn:hover, button:hover, a.btn:hover { background:#CCC; color:var(--bg-button-text-hover); }
input.btn-selected, button.btn-selected, a.btn-selected { background:var(--bg-button-primary); color:#FFF; }
input.btn-selected:hover, button.btn-selected:hover, a.btn-selected:hover { background:var(--bg-button-primary-hover); color:#FFF; }
input[type=checkbox] { height:auto; width: auto; }
label.error { width:0px; height:0px; display: none; font-size:0px; visibility:hidden; }
input.error, textarea.error, select.error { border-color:#FF0000; color:#FF0000; background:#FDE6E7; }
.label { text-align:right; padding-right:10px; padding-top:10px; }
.label_results { padding:10px 0; }
.checkbox_list ul { display:grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding:5px 10px; background:#FFF; border-radius:1px; border-bottom:1px solid #DDD; overflow-y:auto; max-height:150px; }
.flex { display:flex; align-items: center; justify-content: center; }
.nowrap { white-space:nowrap; }
.mt40 { margin-top:40px; }
.mb20 { margin-bottom:20px; }

.enabled { font-size:12px; padding:2px 5px; display:block; text-align:center; white-space:nowrap; }
.enabled i { margin-right:5px; font-size:10px; }
.products_11 { color: var(--link); }
.products_13 { color:#CC0000; }
.invoices_53 { color:orange;  }
.invoices_52 { color: var(--link); }

.status_1 { color:#66CC00; font-size:10px; padding-top:12px; }
.status_2 { color:#CC0000; font-size:10px; padding-top:12px; }
.status_3 { color:#666; font-size:10px; padding-top:12px; }


table { width:100%; border-collapse: collapse; background:#FFF; }
thead td { padding: 10px 20px; font-weight:bold; border-bottom:1px solid #DDD; }
tbody td { padding: 10px 20px; vertical-align:top; border-bottom:1px solid #DDD; }
tbody td.icon i { font-size:14px; margin-right:5px;}
tbody td.icon { white-space:nowrap; }
tbody td a { display:inline-block;  }
tbody td img { border:1px solid #DDD; height:50px; width:50px; }
tbody tr:hover td { background:#f9f9f9; }
tbody tr.macro td { background:#888; color:#FFF; }
tbody tr.macro td a { color:#FFF; }

body { background:url('../images/bg.jpg') no-repeat center center; color:#FFF; font-size:16px; }
.content { width:100%; max-width:1400px; margin:0 auto; }
.logo { margin:0 auto; text-align:center; width:100%; padding:20px; position:fixed; top:0; left:0; right:0; }
.logo img { height:45px; width:auto; }

.main { min-height: calc(100vh - 0px); position:relative; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:20px; min-height: calc(100vh - 0px); }
.intro p { margin:50px 0 0 100px; font-size:30px; line-height:33px; font-weight:500; }
.intro .item { display: flex; align-items: center; justify-content: center; }
h1 { font-size:100px; line-height:90px; color:#FFF; }
h1 span { color:#1afc9c; }
h2 { color:#1afc9c; }
.intro-description { margin:40px auto 0 auto; max-width:800px; display:grid; grid-template-columns:1fr 1fr; gap:100px; font-size:18px; }
.step { max-width:600px; margin:100px auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:80px; }
.step h2 { font-family: 'DM Mono', monospace; border-top:1px solid #1afc9c; border-bottom:1px solid #1afc9c; margin:0 0 20px 0; padding:4px 0; font-size:16px; font-weight:normal; }
.step figure { height:150px; margin-bottom:20px; }
.step img { height:100%; width:auto; }

.faq { color:#1c002e; width:100%; max-width:1000px; margin:0 auto; border-radius:20px; background:#1afc9c; }
.faq h3 { padding: 20px; font-weight:normal; font-size:20px; }
.faq h4 { font-weight:normal; margin:0; font-weight:500; position:relative; cursor:pointer; padding-right:50px; }
.faq .item { border-top:1px solid #1c002e; padding:20px 20px; font-size:18px; }
.faq i { position:absolute; top:0px; right:20px; }
.faq p { margin-top:10px; }

.icon-store { position:absolute; bottom:60px; left:200px; z-index:2;  display:grid; grid-template-columns:100px auto; }
.icon-store img { width:70px; height:auto; margin-right:20px; }
.icon-store h4 { font-family: 'DM Mono', monospace; color:#1afc9c; font-size:14px; margin:0 0 10px; 0 }

.btn-store { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn-store img { width:135px; height:auto; margin-right:0px; }

.footer { font-family: 'DM Mono', monospace; color:#1afc9c; text-align:center; padding:60px 20px; font-size:14px; }
.footer-legal { margin-top:14px; display:flex; justify-content:center; gap:22px; flex-wrap:wrap; }
.footer-legal a { color:#1afc9c; font-weight:300; }
.footer-legal a:hover { color:#fff; }

.page-legal .logo { position:relative; }
.legal { max-width:980px; margin:10px auto 0; padding:36px 40px 28px; background:rgba(28, 0, 46, 0.9); border-radius:20px; color:#fff; letter-spacing:0; }
.legal-back { display:inline-block; margin-bottom:22px; font-family:'DM Mono', monospace; color:#1afc9c; font-size:13px; font-weight:normal; }
.legal-back:hover { color:#fff; }
.legal h1 { font-size:42px; line-height:1.1; margin-bottom:12px; }
.legal .updated { font-family:'DM Mono', monospace; color:#1afc9c; font-size:13px; margin-bottom:16px; }
.legal-intro { display:block; min-height:0; margin:0 0 18px; font-size:17px; line-height:1.45; font-weight:500; }
.legal h2 { font-size:20px; line-height:1.3; margin:22px 0 8px; }
.legal p { font-size:17px; line-height:1.55; margin-bottom:10px; }

.page-account .logo { position:relative; }
.account { max-width:480px; margin:10px auto 0; padding:28px 22px 32px; background:#fff; color:#1b002f; border-radius:24px; letter-spacing:0; }
.account h1 { font-size:28px; line-height:1.2; color:#340062; text-align:center; margin:0 0 8px; }
.account-lead, .account-note { color:#666; font-size:17px; line-height:1.45; text-align:center; margin:0 0 18px; }
.account-note a, .account-forgot a, .account-back { color:#340062; font-weight:600; }
.account a:hover, .account-back:hover { color:#1b002f; }
.account-back { display:inline-block; margin-bottom:14px; font-size:15px; }
.account-error, .account-ok { border-radius:12px; padding:12px 14px; margin:0 0 16px; font-size:15px; line-height:1.4; text-align:center; }
.account-error { background:#fff4f2; color:#9f1d14; }
.account-ok { background:#e9fff6; color:#0d6b45; }
.account-label { display:block; color:#666; font-size:16px; margin:0 0 8px 4px; }
.account input.account-field { width:100%; height:52px; border:1px solid #ddd; border-radius:12px; padding:0 14px; margin:0 0 14px; font-family:"Afacad", sans-serif; font-size:16px; color:#1b002f; background:#fff; letter-spacing:0; }
.account-field-wrap { position:relative; }
.account-field-wrap input.account-field { padding-right:48px; }
.account button.account-eye { position:absolute; top:8px; right:8px; width:36px; height:36px; padding:0; border:0; background:transparent; color:#9a9aa3; cursor:pointer; }
.account button.account-btn, a.account-btn { width:100%; height:52px; border:0; border-radius:48px; background:#1afd9c; color:#000; font-family:"Afacad", sans-serif; font-size:20px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.account button.account-btn:hover, a.account-btn:hover { background:#14e48d; color:#000; }
.account-forgot { text-align:right; margin:-4px 0 16px; }
.account-avatar { width:80px; height:80px; border-radius:40px; background:#1afd9c; color:#361f48; font-size:40px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:8px auto 10px; }
.account-name { text-align:center; font-size:22px; font-weight:700; color:#361f48; margin:0 0 22px; }
.account-menu { background:#f5f5f5; border:1px solid #eee; border-radius:16px; overflow:hidden; margin-bottom:8px; }
.account-menu a { display:flex; align-items:center; min-height:56px; padding:0 16px; color:#1b002f; font-size:18px; font-weight:600; text-decoration:none; border-top:1px solid #b0b0b0; }
.account-menu a:first-child { border-top:0; }
.account-menu a span { margin-left:auto; color:#9a9aa3; font-weight:400; }
.account button.account-logout { width:100%; min-height:56px; margin-top:0; border:0; background:transparent; color:#FF3B30; font-family:"Afacad", sans-serif; font-size:18px; font-weight:600; cursor:pointer; }
.account-banner { background:#fff4f2; border:1px solid #ffd0cb; color:#9f1d14; border-radius:16px; padding:14px 16px; margin:0 0 18px; }
.account-banner strong { display:block; margin-bottom:6px; }
.account-banner p { margin:0; font-size:15px; line-height:1.45; }
.account button.account-text-btn { display:block; width:100%; margin-top:10px; padding:0; border:0; background:transparent; color:#FF3B30; font-family:"Afacad", sans-serif; font-size:16px; font-weight:600; cursor:pointer; text-align:left; height:auto; }
.account-note-box, .account-help div, .account-delete { background:#f5f5f5; border:1px solid #eee; border-radius:16px; padding:16px; margin:0 0 18px; }
.account-note-box strong, .account-help strong { display:block; margin-bottom:6px; font-size:18px; }
.account-note-box p, .account-help p, .account-delete p { margin:0; color:#555; font-size:16px; line-height:1.4; }
.account-help div { margin-bottom:12px; }
.account-delete-link { text-align:center; margin:18px 0 0; }
.account-delete-link a { color:#FF3B30; font-size:17px; font-weight:600; }
.account-check { display:flex; gap:10px; align-items:flex-start; margin:14px 0; font-size:15px; line-height:1.4; }
.account-check input { width:auto; height:auto; margin-top:3px; }

.account-wide { max-width:920px; }
.card-list { display:flex; flex-direction:column; gap:16px; }
.saved-card { background:#f5f5f5; border:1px solid #eee; border-radius:16px; padding:16px; text-align:left; }
.saved-card-head { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.saved-card-head h2 { font-size:22px; line-height:1.2; color:#1b002f; margin:0 0 4px; text-align:left; }
.saved-card-head p { margin:0; color:#555; font-size:16px; }
.saved-card-photo { width:72px; height:72px; border-radius:36px; object-fit:cover; background:#1afd9c; display:block; }
.saved-card-initial { display:flex; align-items:center; justify-content:center; color:#361f48; font-size:28px; font-weight:700; }
.saved-home { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:999px; background:#1afd9c; color:#1b002f; font-size:12px; font-weight:700; letter-spacing:0.04em; }
.saved-shots { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.saved-shots figure { margin:0; background:#fff; border-radius:12px; padding:10px; }
.saved-shots figcaption { color:#666; font-size:13px; margin-bottom:8px; }
.saved-shots img { width:100%; height:220px; object-fit:contain; display:block; }
.saved-shots figure.is-vertical img { height:320px; }
.saved-fields { margin:14px 0 0; padding:0; }
.saved-fields li { margin:0 0 6px; font-size:16px; line-height:1.4; color:#1b002f; }
.saved-fields span { color:#666; margin-right:6px; }
.saved-notes { margin:12px 0 0; color:#444; font-size:16px; line-height:1.45; }