/* Registrar (web/registrar.js): the top bar button, the sheet with its three paths, the first minutes on the home and
   the merchant names on the review screen. Same palette and type as the rest of the app. */
.register-chip{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 15px 8px 11px;border:1px solid #d8efc259;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:700;cursor:pointer}
.register-chip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2}
.register-chip:hover{background:var(--accent-hover)}
.composer-attach{flex:none;width:42px;height:42px;min-height:42px;border-radius:50%}
.composer-attach svg{width:18px;height:18px}

.registrar-sheet{width:min(560px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 48px));padding:0;border:1px solid #a9c7b940;border-radius:26px;background:#141b21;color:var(--text);box-shadow:0 24px 90px #000a;overflow:auto}
.registrar-sheet::backdrop{background:#05080cb8;backdrop-filter:blur(3px)}
.registrar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 12px}
.registrar-head h2{margin:0;font-size:22px;letter-spacing:-.3px}.registrar-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.registrar-head .icon-button{width:38px;height:38px;flex:none;font-size:22px;line-height:1}
.registrar-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 22px 6px}
.registrar-tab{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:84px;padding:12px 8px;border:1px solid var(--edge);border-radius:18px;background:#ffffff06;color:#cdd5cb;font-size:12.5px;font-weight:600;text-align:center;cursor:pointer}
.registrar-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
.registrar-tab[aria-selected=true]{border-color:#d8efc28c;background:#d8efc217;color:var(--accent)}
.registrar-panel{display:grid;gap:12px;padding:14px 22px 6px}
.registrar-panel>label{font-size:13px;color:#d7dfd5}
.registrar-panel textarea{width:100%;min-height:70px;resize:vertical;padding:13px 15px;border:1px solid #ffffff22;border-radius:15px;background:#0b1117;color:var(--text);font:inherit;font-size:15px}
.registrar-hint,.registrar-foot,.registrar-note{margin:0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.registrar-note{padding:10px 12px;border-radius:12px;background:#efd5ac14;color:var(--focus)}
.registrar-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.registrar-actions .primary{min-width:180px}
.registrar-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 16px;border:1px dashed #cfe5bb55;border-radius:18px;background:#d8efc206;text-align:center;cursor:pointer}
.registrar-drop svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.6}
.registrar-drop strong{font-size:14px}.registrar-drop small{font-size:11.5px;color:var(--muted);line-height:1.5}
.registrar-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.registrar-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.registrar-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.registrar-thumb{position:relative;margin:0;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:#0b1117}
.registrar-thumb img{display:block;width:100%;height:120px;object-fit:cover}
.registrar-thumb .icon-button{position:absolute;top:5px;right:5px;width:28px;height:28px;min-height:28px;padding:0;font-size:16px;background:#000a}
.registrar-thumb figcaption{padding:6px 8px;font-size:10.5px;color:var(--focus)}
.registrar-preview{display:grid;max-height:300px;overflow:auto;border:1px solid var(--edge);border-radius:14px}
.registrar-row{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:12.5px}
.registrar-row+.registrar-row{border-top:1px solid #ffffff0d}
.registrar-row>span{flex:1;min-width:0;display:grid;gap:2px}.registrar-row small{font-size:11px;color:var(--muted)}
.registrar-row input{width:18px;height:18px;accent-color:#cfe5bb}
#registrar-error{padding:0 22px 18px;color:#f5beb5;font-size:12.5px}#registrar-error:empty{display:none}
@media(max-width:700px){
 .registrar-sheet{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom)}
 .registrar-head{padding:18px 16px 8px}.registrar-tabs{padding:4px 16px 4px;gap:6px}.registrar-tab{min-height:76px;font-size:11.5px}
 .registrar-panel{padding:12px 16px 6px}.registrar-actions .primary{flex:1}#registrar-error{padding:0 16px 16px}
}

/* The first minutes on the home. */
.registrar-start{padding:24px 26px;margin-bottom:24px;border-color:#d8efc240;background:linear-gradient(135deg,#26342ecc,#171e25e6)}
.registrar-start h2{margin:8px 0 14px;font-size:21px;line-height:1.35}
.registrar-start ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.registrar-start li{display:flex;gap:12px;align-items:flex-start}
.registrar-start li>div{flex:1;min-width:0;display:grid;gap:6px}
.registrar-start li strong{font-size:14px}.registrar-start li p{margin:0;font-size:12.5px;color:var(--muted)}
.registrar-step{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #d8efc266;color:var(--accent);font-size:13px;font-weight:700}
.registrar-start li.done .registrar-step{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.registrar-income{display:flex;gap:8px;flex-wrap:wrap}
.registrar-income input{min-height:42px;padding:9px 12px;border:1px solid #ffffff22;border-radius:12px;background:#0b1117;color:var(--text);font:inherit;font-size:14px}
.registrar-income input:first-of-type{flex:1;min-width:150px}.registrar-income input[type=number]{width:78px}
.registrar-inline{display:flex;gap:8px;flex-wrap:wrap}
.registrar-wow{margin-top:16px;padding:16px 18px;border-radius:18px;background:#d8efc214;border:1px solid #d8efc240}
.registrar-wow p{margin:0 0 6px;font-size:15px;line-height:1.55}.registrar-wow strong{font-size:20px;color:var(--accent)}
@media(max-width:700px){.registrar-start{padding:20px}.registrar-start h2{font-size:19px}}

/* Review screen: the original name, the guess and "remember this name". */
.registrar-row-extras{display:grid;gap:6px;margin-top:10px}
.registrar-raw,.registrar-guess{margin:0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.registrar-guess strong{color:var(--focus)}.registrar-guess .text-button{display:inline;margin-left:6px;font-size:11.5px}
.registrar-remember summary{cursor:pointer;font-size:11.5px;color:var(--accent)}
.registrar-remember[open]{display:grid;gap:8px}.registrar-remember label{font-size:12px}
.registrar-remember select{max-width:220px;min-height:38px;font-size:12px}
.registrar-guess-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:14px 16px;border-radius:16px;border:1px solid #efd5ac40;background:#efd5ac10}
.registrar-guess-bar p{margin:0;font-size:12.5px;color:var(--focus)}
@media(max-width:759px){.topbar .register-chip{padding:7px 12px 7px 9px;min-height:38px;font-size:12px}.topbar .credits-chip span{display:none}.topbar .brand-name{font-size:17px}}
@media(max-width:380px){.topbar .register-chip span{display:none}.topbar .register-chip{padding:8px 10px}}
.registrar-check{display:flex;align-items:center;gap:9px;font-size:12px;cursor:pointer}
.registrar-check input{width:18px;height:18px;flex:none;accent-color:#cfe5bb}