/* YourQRTools 1.1 — controls, panel alignment, emerald palette and motion. */
:root {
  --bg:#f3f7f7; --paper:#ffffff; --ink:#132d34; --muted:#586c74;
  --line:#dce6e7; --accent:#007b54; --accent-hover:#006345;
  --tint:#e4f7ee; --violet:#7652ba; --button-ink:#ffffff;
  --focus-glow:rgba(0,146,99,.15); --lift-shadow:0 12px 30px rgba(10,72,54,.1);
  --shadow:0 5px 22px rgba(24,58,62,.045); --ease:cubic-bezier(.22,.75,.24,1);
}
:root[data-theme=dark] {
  --bg:#0c1720; --paper:#14232d; --ink:#edf7fc; --muted:#a8becb;
  --line:#2a404e; --accent:#20dc9b; --accent-hover:#57edb7;
  --tint:#143a30; --violet:#be9dff; --button-ink:#062c21;
  --focus-glow:rgba(32,220,155,.16); --lift-shadow:0 15px 34px rgba(0,0,0,.24);
  --shadow:0 7px 24px rgba(0,0,0,.12);
}
body { background-image:radial-gradient(ellipse at 90% 0,rgba(6,174,117,.05),transparent 43%); }
body,.topbar,.panel,.footer,.tool-nav { transition:background-color .24s ease,border-color .24s ease,color .2s ease; }
button,a,summary { -webkit-user-select:none; user-select:none; }
.article a { -webkit-user-select:text; user-select:text; }
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible { outline-color:var(--accent); }
input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),select {
  height:48px; min-height:48px; padding-block:10px; line-height:24px;
}
input,select,textarea { transition:border-color .18s ease,box-shadow .18s ease,background-color .2s ease; }
input:hover,select:hover,textarea:hover { border-color:var(--muted); }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-glow); }
input[type=color] { height:44px; border-radius:11px; }
input[type=color]::-webkit-color-swatch-wrapper { padding:3px; }
input[type=color]::-webkit-color-swatch { border:0; border-radius:6px; }
.field-grid,.totp-settings { align-items:end; }
.totp-settings { grid-template-columns:1.15fr .8fr 1fr; gap:14px; }
.totp-settings .field>span { line-height:20px; min-height:20px; }

/* A real input/button layout; neither can cover the other in RTL or LTR. */
.input-reveal {
  display:flex; align-items:center; gap:5px; padding:4px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.input-reveal:hover { border-color:var(--muted); }
.input-reveal:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-glow); }
.input-reveal>input {
  flex:1 1 0; min-width:0; width:0; height:42px!important; min-height:42px!important;
  padding:9px 11px; border:0; border-radius:8px; background:transparent;
  line-height:24px; box-shadow:none; outline:none;
}
.input-reveal>input:focus-visible { outline:none; box-shadow:none; }
.input-reveal>.reveal-button,.reveal-button {
  position:static; inset:auto; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; gap:7px; min-height:40px; min-width:44px; padding:8px 12px;
  border:1px solid transparent; border-radius:8px; background:var(--tint);
  color:var(--accent); font:inherit; font-size:11px; font-weight:650; line-height:20px;
  white-space:nowrap; cursor:pointer;
  transition:background-color .18s ease,box-shadow .18s ease,transform .2s var(--ease);
}
.reveal-button .icon { width:18px; height:18px; transition:transform .2s var(--ease); }
.reveal-button:hover,.reveal-button:focus-visible { background:var(--accent); color:var(--button-ink); }
.reveal-button[aria-pressed=true] { border-color:var(--accent); }
.reveal-button:active .icon { transform:scale(.86); }
.result-fields .input-reveal { margin-top:6px; white-space:normal; }
.raw-label { gap:12px; margin-bottom:8px; }
.raw-label>.label { margin:0; }
.raw-label .reveal-button { min-height:34px; padding:5px 10px; }

/* Equal desktop columns and matching card edges for the two paired tools. */
#tool-decode .tool-layout,#tool-totp .tool-layout {
  grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch;
}
#tool-decode .tool-layout>.panel { min-height:410px; display:flex; flex-direction:column; }
#tool-decode .dropzone { flex:1 0 auto; }
#tool-decode .result-empty { flex:1; }
#tool-totp .tool-layout>.panel { min-height:450px; }
#tool-totp .totp-panel { display:flex; flex-direction:column; }
#tool-totp .totp-output { flex:1; }
#tool-totp .session-note { flex:0 0 auto; }
.totp-actions { gap:13px; }
.totp-actions>.text-button { min-height:44px; padding-inline:5px; }
.code { font-size:clamp(36px,4.3vw,58px); letter-spacing:5px; }
.timer-line { justify-content:center; }
.timer-ring { width:33px; height:33px; }
.timer-number { font-size:10px; }
.export-row { grid-template-columns:105px minmax(0,1fr); }
.export-row>.button { min-height:48px; }

/* Crisp selected states and feedback for mouse, touch and keyboard. */
.button,.small-button,.icon-button,.type-button,.palette,.reveal-button {
  position:relative; isolation:isolate; overflow:hidden;
}
.button,.small-button,.icon-button,.type-button {
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .18s ease,border-color .18s ease,color .18s ease;
}
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--button-ink); box-shadow:0 4px 10px var(--focus-glow); }
.button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--button-ink); }
.button.secondary:hover,.small-button:hover { background:var(--tint); border-color:var(--accent); color:var(--accent); }
.button:active,.small-button:active,.icon-button:active,.type-button:active { transform:scale(.975); }
.button .icon,.small-button .icon { transition:transform .22s var(--ease); }
.type-button { min-height:68px; }
.type-button[aria-pressed=true] { color:var(--button-ink); background:var(--accent); border-color:var(--accent); box-shadow:0 5px 12px var(--focus-glow); }
.type-button .icon { transition:transform .25s var(--ease); }
.palette { transition:transform .2s var(--ease),outline-color .2s ease,box-shadow .2s ease; }
.palette[aria-pressed=true] { outline:2px solid var(--accent); box-shadow:0 0 0 4px var(--focus-glow); }
.palette[aria-pressed=true]::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:700 15px Arial,sans-serif; text-shadow:0 1px 3px #0005; }
.text-button { border-radius:5px; transition:color .18s ease,background-color .18s ease,transform .2s var(--ease); }
.text-button:hover { color:var(--accent-hover); }
.icon-button:hover { background:var(--tint); color:var(--accent); border-color:var(--accent); }
#theme-toggle .icon { transition:transform .4s var(--ease); }
#theme-toggle:hover .icon { transform:rotate(45deg); }
.main-nav a { position:relative; transition:color .18s ease; }
.main-nav a::after { content:''; position:absolute; inset-inline:0; bottom:2px; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transition:transform .25s var(--ease); }
.main-nav a:hover::after,.main-nav a[aria-current=page]::after { transform:scaleX(1); }
.lang-link { transition:color .18s ease; }

/* The pill follows the selected tool in either writing direction. */
.tool-nav { position:relative; background:var(--line); border-color:var(--line); }
:root[data-theme=dark] .tool-nav { background:#0e1c25; }
.tool-nav>a { position:relative; z-index:1; transition:color .22s ease,background-color .22s ease; }
.tool-nav>a[aria-current=page] { color:var(--accent); }
.tool-nav.has-indicator>a[aria-current=page] { background:transparent; box-shadow:none; }
.tool-indicator { position:absolute; inset-block:6px; left:0; border:1px solid var(--line); border-radius:9px; background:var(--paper); pointer-events:none; z-index:0; box-shadow:0 3px 9px rgba(13,42,43,.08); transition:transform .36s var(--ease),width .36s var(--ease); }

.dropzone { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:285px; background:var(--tint); border-color:var(--accent); transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease; }
.drop-icon { border:1px solid var(--line); box-shadow:0 5px 15px var(--focus-glow); transition:transform .3s var(--ease),color .2s ease,background-color .2s ease; }
.dropzone.dragging { background:var(--tint); border-style:solid; box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--focus-glow); outline:0; }
.dropzone:hover .drop-icon,.dropzone:focus-visible .drop-icon,.dropzone.dragging .drop-icon { transform:translateY(-5px) rotate(-5deg); background:var(--accent); color:var(--button-ink); border-color:var(--accent); }
.dropzone:hover,.dropzone:focus-visible { box-shadow:inset 0 0 0 1px var(--accent); }
.guide-card { transition:transform .28s var(--ease),border-color .22s ease,box-shadow .28s var(--ease); }
.guide-card:focus-visible { border-color:var(--accent); box-shadow:var(--lift-shadow); }
.guide-icon { transition:background-color .22s ease,color .22s ease,transform .28s var(--ease); }
.guide-card:hover .guide-icon,.guide-card:focus-visible .guide-icon { background:var(--accent); color:var(--button-ink); transform:rotate(-5deg); }
.read-more .icon { transition:translate .25s var(--ease); }
.guide-card:hover .read-more .icon,.guide-card:focus-visible .read-more .icon { translate:4px 0; }
html[dir=rtl] .guide-card:hover .read-more .icon,html[dir=rtl] .guide-card:focus-visible .read-more .icon { translate:-4px 0; }
.qr-stage { position:relative; border:1px solid var(--line); }
.qr-stage.is-testing::after { content:''; position:absolute; inset-inline:18px; top:20%; height:2px; border-radius:4px; background:var(--accent); box-shadow:0 0 15px var(--accent); pointer-events:none; animation:scan-line 1.25s ease-in-out infinite alternate; }
.qr-output>svg { animation:qr-appear .38s var(--ease) both; }
.interaction-ripple { position:absolute; border-radius:50%; pointer-events:none; background:currentColor; opacity:.18; transform:scale(0); animation:button-ripple .55s ease-out forwards; z-index:-1; }
.intro { animation:panel-arrive .48s var(--ease) both; }
.tool-view:not([hidden]) .tool-layout>.panel { animation:panel-arrive .4s var(--ease) both; }
.tool-view:not([hidden]) .tool-layout>.panel:nth-child(2) { animation-delay:.055s; }
.status.success { font-weight:600; }

@media(hover:hover) and (pointer:fine) {
  .button:not(:disabled):not([aria-disabled=true]):hover,.small-button:not(:disabled):hover { transform:translateY(-2px); box-shadow:var(--lift-shadow); }
  .type-button:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--lift-shadow); }
  .type-button:hover .icon { transform:scale(1.1) rotate(-5deg); }
  .palette:hover { transform:translateY(-2px) scale(1.1); outline-color:var(--accent); }
  .guide-card:hover { transform:translateY(-5px); box-shadow:var(--lift-shadow); }
  .brand:hover .brand-mark { transform:rotate(-4deg) scale(1.04); }
  .brand-mark { transition:transform .28s var(--ease); }
}
@media(max-width:720px) {
  #tool-decode .tool-layout,#tool-totp .tool-layout { grid-template-columns:minmax(0,1fr); align-items:start; }
  #tool-decode .tool-layout>.panel,#tool-totp .tool-layout>.panel { min-height:0; }
  #tool-decode .result-empty { min-height:250px; }
  #tool-totp .totp-output { min-height:270px; }
  .dropzone { min-height:245px; padding:28px 18px; }
  .tool-nav>a { min-width:0; }
  .code { font-size:44px; letter-spacing:4px; }
  .tool-indicator { inset-block:6px; }
}
@media(max-width:380px) {
  .totp-settings { gap:8px; }
  .input-reveal>.reveal-button { gap:5px; padding-inline:9px; }
  .reveal-button .icon { width:16px; height:16px; }
  .input-reveal>input { padding-inline:8px; font-size:12px; }
  .export-row { grid-template-columns:90px minmax(0,1fr); }
  .code { font-size:34px; letter-spacing:3px; }
  .type-button { min-height:64px; }
}
@keyframes panel-arrive { from {opacity:0;transform:translateY(11px)} to {opacity:1;transform:translateY(0)} }
@keyframes qr-appear { from {opacity:.45;transform:scale(.97)} to {opacity:1;transform:scale(1)} }
@keyframes scan-line { from {top:17%;opacity:.45} to {top:82%;opacity:1} }
@keyframes button-ripple { to {transform:scale(1);opacity:0} }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .button:hover,.small-button:hover,.type-button:hover,.guide-card:hover,.palette:hover { transform:none!important; }
  .interaction-ripple,.qr-stage.is-testing::after { display:none!important; }
}