/* PotpisGenerator — sve je ograničeno na .pgen da ne bi uticalo na temu.
   Layout: banner + naslov → dve kolone (forma | lepljivi pregled u "novoj poruci" + uputstvo) */
.pgen{
  --pgen-bg:#0a0f1d;
  --pgen-panel:#111a2e;
  --pgen-panel-2:#0d1526;
  --pgen-ink:#eef1fb;
  --pgen-muted:#9aa6c4;
  --pgen-line:rgba(255,255,255,.10);
  --pgen-field:#0b1222;
  --pgen-accent:#ec6b00;
  --pgen-accent-2:#ffb547;
  --pgen-sans:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  --pgen-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  position:relative;color:var(--pgen-ink);font-family:var(--pgen-sans);font-size:15px;line-height:1.5;
  background:
    radial-gradient(900px 420px at 12% -8%,color-mix(in srgb,var(--pgen-accent) 22%,transparent),transparent 62%),
    radial-gradient(700px 380px at 92% 4%,rgba(77,214,200,.10),transparent 60%),
    var(--pgen-bg);
  border-radius:20px;color-scheme:dark;
}
.pgen--full{border-radius:0;width:calc(100vw - var(--pgen-sbw,0px));margin-left:calc(50% - (100vw - var(--pgen-sbw,0px)) / 2);max-width:none}
.pgen *,.pgen *::before,.pgen *::after{box-sizing:border-box}
.pgen-shell{max-width:1320px;margin:0 auto;padding:clamp(24px,5vw,56px) max(16px,env(safe-area-inset-right,0px)) clamp(32px,6vw,64px) max(16px,env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;gap:28px}
@media (min-width:700px){.pgen-shell{padding-left:32px;padding-right:32px}}

/* Hero */
.pgen-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.pgen-banner{display:block;width:min(560px,100%);height:auto;border-radius:14px}
.pgen .pgen-title{margin:6px 0 0;padding:0;font-family:var(--pgen-sans);font-size:clamp(26px,4vw,40px);line-height:1.1;font-weight:800;
  letter-spacing:-.025em;color:var(--pgen-ink);text-wrap:balance;text-transform:none;border:0}
.pgen-lead{margin:0;max-width:60ch;color:var(--pgen-muted);text-wrap:balance}

/* Mreža */
.pgen-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1060px){.pgen-grid{grid-template-columns:minmax(0,1fr)}}
.pgen-panel{background:var(--pgen-panel);border:1px solid var(--pgen-line);border-radius:18px;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.pgen-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(16px + env(safe-area-inset-top,0px))}
@media (max-width:1060px){.pgen-side{position:static}}

/* Forma */
.pgen-form{padding:6px 20px 20px;display:flex;flex-direction:column}
.pgen .pgen-sec{border:0;margin:0;padding:18px 0;border-bottom:1px solid var(--pgen-line);min-width:0}
.pgen .pgen-sec legend{float:left;width:100%;padding:0;margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pgen-ink)}
.pgen .pgen-sec legend i,.pgen-f label i{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;color:var(--pgen-muted);font-size:12px}
.pgen-fields{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
@media (max-width:560px){.pgen-fields{grid-template-columns:minmax(0,1fr)}}
.pgen-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.pgen-f--wide{grid-column:1/-1}
.pgen .pgen-f label{font-size:13px;font-weight:600;color:var(--pgen-muted);margin:0;display:flex;justify-content:space-between;gap:8px}
.pgen-f output{font-family:var(--pgen-mono);font-size:12px;color:var(--pgen-ink)}
.pgen input:not([type=radio]):not([type=range]):not([type=color]):not([type=file]),.pgen select,.pgen textarea{
  width:100%;margin:0;min-height:42px;padding:10px 12px;border-radius:10px;border:1px solid var(--pgen-line);
  background:var(--pgen-field);color:var(--pgen-ink);font:inherit;font-size:14px;line-height:1.4;box-shadow:none;outline:none;transition:border-color .15s,box-shadow .15s}
.pgen textarea{resize:vertical;min-height:84px}
.pgen select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--pgen-muted) 50%),linear-gradient(135deg,var(--pgen-muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.pgen select option{background:#0f172a;color:#eef1fb}
.pgen input::placeholder,.pgen textarea::placeholder{color:color-mix(in srgb,var(--pgen-muted) 65%,transparent)}
.pgen input:focus,.pgen select:focus,.pgen textarea:focus{border-color:color-mix(in srgb,var(--pgen-accent) 70%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pgen-accent) 18%,transparent)}
.pgen input[type=range]{width:100%;margin:6px 0 0;accent-color:var(--pgen-accent);background:transparent;border:0;padding:0;height:22px}
.pgen-multi{gap:8px}
.pgen-multi input[hidden]{display:none}
.pgen .pgen-add{all:unset;cursor:pointer;align-self:flex-start;font-size:13px;font-weight:600;color:var(--pgen-accent-2);padding:2px 0}
.pgen .pgen-add:hover{text-decoration:underline}
.pgen .pgen-add:focus-visible{outline:2px solid var(--pgen-accent);outline-offset:2px;border-radius:4px}
.pgen-color{display:flex;gap:8px}
.pgen .pgen-color input[type=color]{width:46px;height:42px;flex:0 0 46px;padding:3px;border-radius:10px;border:1px solid var(--pgen-line);background:var(--pgen-field);cursor:pointer}
.pgen .pgen-color input:not([type=color]){font-family:var(--pgen-mono);text-transform:lowercase}
.pgen-logo-row{display:flex;gap:8px}
.pgen-logo-row input{flex:1;min-width:0}
.pgen-note{font-size:12px;color:var(--pgen-muted);line-height:1.45}
.pgen-note.is-error{color:#ff9aa8}
.pgen-note.is-ok{color:#7ee2b8}

/* Šabloni */
.pgen-tpls{clear:both;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pgen .pgen-tpl{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:11px 12px;margin:0;border-radius:12px;
  border:1px solid var(--pgen-line);background:var(--pgen-panel-2);transition:border-color .15s,background .15s}
.pgen .pgen-tpl:hover{border-color:color-mix(in srgb,var(--pgen-accent) 45%,var(--pgen-line))}
.pgen-tpl input{position:absolute;opacity:0;pointer-events:none}
.pgen-tpl-code{font-family:var(--pgen-mono);font-size:11px;color:var(--pgen-muted)}
.pgen-tpl b{font-size:14px;color:var(--pgen-ink)}
.pgen-tpl small{font-size:12px;color:var(--pgen-muted);line-height:1.35}
.pgen-tpl:has(input:checked){border-color:var(--pgen-accent);background:color-mix(in srgb,var(--pgen-accent) 12%,var(--pgen-panel-2))}
.pgen-tpl:has(input:checked) .pgen-tpl-code{color:var(--pgen-accent-2)}
.pgen-tpl:has(input:focus-visible){outline:2px solid var(--pgen-accent);outline-offset:2px}

.pgen-form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:16px}
.pgen-form-foot .pgen-note{margin-left:auto}

/* Dugmad */
.pgen .pgen-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;
  border-radius:10px;font-size:14px;font-weight:700;color:var(--pgen-ink);background:rgba(255,255,255,.06);border:1px solid var(--pgen-line);
  transition:filter .15s,background .15s,transform .1s;white-space:nowrap}
.pgen .pgen-btn:hover{background:rgba(255,255,255,.10)}
.pgen .pgen-btn:active{transform:translateY(1px)}
.pgen .pgen-btn:focus-visible,.pgen .pgen-upload:focus-within{outline:2px solid var(--pgen-accent);outline-offset:2px}
.pgen .pgen-btn--primary{background:linear-gradient(135deg,var(--pgen-accent),color-mix(in srgb,var(--pgen-accent) 70%,var(--pgen-accent-2)));
  border-color:transparent;color:#fff;box-shadow:0 10px 24px -12px var(--pgen-accent)}
.pgen .pgen-btn--primary:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--pgen-accent),color-mix(in srgb,var(--pgen-accent) 70%,var(--pgen-accent-2)))}
.pgen .pgen-btn--ghost{background:transparent}
.pgen .pgen-btn[aria-busy=true]{opacity:.6;pointer-events:none}

/* Pregled kao nova poruka */
.pgen-preview-panel{padding:16px;display:flex;flex-direction:column;gap:14px}
.pgen-mail{background:#fff;color:#111;border-radius:12px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.04)}
.pgen-mail-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f1f3f6;border-bottom:1px solid #e4e7ec;font-family:var(--pgen-sans)}
.pgen-mail-bar span{width:9px;height:9px;border-radius:50%;background:#d5d9e0}
.pgen-mail-bar b{margin-left:8px;font-size:12px;color:#4b5563;font-weight:600}
.pgen-mail-head{padding:4px 16px;border-bottom:1px solid #eef0f3;font-family:var(--pgen-sans);font-size:13px;color:#111}
.pgen-mail-head div{padding:6px 0;border-bottom:1px solid #f2f4f7}
.pgen-mail-head div:last-child{border-bottom:0}
.pgen-mail-head span{display:inline-block;width:46px;color:#6b7280}
.pgen-mail-body{padding:16px;font-family:Arial,"Segoe UI",Roboto,sans-serif;font-size:14px;color:#222;overflow-x:auto}
.pgen-mail-body p{margin:0 0 10px;color:#222}
.pgen-sig{margin-top:14px;min-width:0}
.pgen-sig img{max-width:none}

.pgen-actions{display:flex;flex-wrap:wrap;gap:8px}
.pgen-actions .pgen-btn--primary{flex:1 1 180px}
.pgen-toast{margin:0;min-height:1.4em;font-size:13px;color:#7ee2b8}
.pgen-toast.is-error{color:#ff9aa8}
.pgen-code summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--pgen-muted)}
.pgen-code summary:focus-visible{outline:2px solid var(--pgen-accent);outline-offset:2px;border-radius:4px}
.pgen .pgen-code textarea{margin-top:10px;font-family:var(--pgen-mono);font-size:12px;color:var(--pgen-muted)}

/* Uputstvo */
.pgen-help{padding:14px 16px 16px}
.pgen-help-tabs{display:flex;gap:4px;padding:4px;background:var(--pgen-panel-2);border:1px solid var(--pgen-line);border-radius:10px;margin-bottom:12px}
.pgen .pgen-help-tabs button{all:unset;cursor:pointer;flex:1;text-align:center;padding:7px 8px;border-radius:7px;font-size:13px;font-weight:600;color:var(--pgen-muted)}
.pgen .pgen-help-tabs button[aria-selected=true]{background:var(--pgen-panel);color:var(--pgen-ink);box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 10px rgba(0,0,0,.25)}
.pgen .pgen-help-tabs button:focus-visible{outline:2px solid var(--pgen-accent)}
.pgen .pgen-help ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--pgen-ink)}
.pgen .pgen-help ol[hidden]{display:none}
.pgen .pgen-help li{margin:0;padding-left:2px}
.pgen .pgen-help li::marker{color:var(--pgen-accent-2);font-weight:700}

@media (prefers-reduced-motion:reduce){.pgen *{transition:none!important}}