@charset "utf-8";

:root{
  --label-col: 11em;
  --bg: #fff;
  --panel-bg: #f5f5f5;
  --fg: #333;
  --muted: #666;
  --accent: #9ed636;
  --accent-ink: #4c6b17;
  --banner-bg: rgba(0,0,0,.85);
  --banner-fg: #fff;
  --accent-a-35: rgba(158,214,54,.35);
  --accent-a-50: rgba(158,214,54,.5);
  --accent-a-60: rgba(158,214,54,.6);
  --line: #ced4da;
  --line-2: #666;
  --line-soft: #ddd;
  --panel-2: #444;
  --chip-strong-bg: #e7f2d0;
  --chip-strong-ink: #3e5b12;
  --strength-1: #ff2626;
  --strength-2: #ff6b2d;
  --strength-3: #ffb733;
  --strength-4: var(--accent);
  --strength-5: var(--accent);
  --chip1-bg:#ffe5e5; --chip1-ink:#8b1a1a; --chip1-border:rgba(255,38,38,.5);
  --chip2-bg:#fff0ea; --chip2-ink:#7a2e14; --chip2-border:rgba(255,107,45,.5);
  --chip3-bg:#fff8e6; --chip3-ink:#7a5e14; --chip3-border:rgba(255,183,51,.5);
  --footer-bg:#a9955b; --footer-fg:#231815;
}

.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; gap: .75em; flex-wrap: wrap; padding: .9em 1em; background: var(--footer-bg); color: var(--footer-fg); box-shadow: 0 -6px 20px rgba(0,0,0,.25); }
.cookie-banner.hidden { display: none; }
.cookie-banner .msg { flex: 1 1 240px; font-size: .95em; line-height: 1.4; }
.cookie-banner .actions { display: flex; gap: .5em; margin-left: auto; }
.cookie-banner .actions .ccb { font-size: .9em; padding: .5em .9em; border: 2px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--accent); cursor: pointer; transition: background .2s ease,color .2s ease; }
.cookie-banner .actions .ccb:focus-visible { outline: none; box-shadow: 0 0 0 .2rem var(--accent-a-35); }
.cookie-banner .actions .ccb:hover { background: var(--accent); color: var(--bg); }
.cookie-banner .actions .ccb.ccb--primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.cookie-banner .actions .ccb.ccb--primary:hover { background: var(--bg); color: var(--accent); }

body { font:120%/1.5 "Helvetica Neue", Arial, sans-serif; margin:0; padding:0; background:var(--bg); color:var(--fg); }
.box { display:flex; justify-content:center; align-items:center; min-height:calc(var(--vh, 1vh) * 100); background:var(--panel-bg); padding:0; position:relative; }
    @supports (height: 100dvh) { .box { min-height: 100dvh; } }
.box2 { width:100%; max-width:600px; background:var(--panel-bg); padding:2em; border-radius:8px; color:var(--fg); position:relative; }
.settings-button{position:static;display:inline-flex;align-items:center;gap:.4em;font-size:.8em;line-height:1;padding:.5em .7em;min-height:40px;min-width:40px;background:var(--accent);color:#fff;border:2px solid var(--accent);border-radius:6px;cursor:pointer;z-index:20;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .06s ease;}
    .settings-container{position:fixed;top:12px;right:12px;z-index:20;}
    .settings-container + .password-item { margin-top: 1.25rem; }

    @supports (padding: env(safe-area-inset-top)){
      .settings-container{top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 12px);}
    }
    .site-footer{ padding-bottom: calc(1.2em + env(safe-area-inset-bottom)); }
.settings-button:hover { background:#fff; color:var(--accent); }
    .settings-button:active { transform: translateY(1px); }
.settings-button:focus-visible { outline: none; box-shadow: 0 0 0 .2rem var(--accent-a-35); }
    .settings-open .settings-button { display:none; }
    body.settings-open { overflow: hidden; }
    .icon-gear { width:1.1em; height:1.1em; display:inline-block; vertical-align:middle; flex-shrink:0; }
    .password-item { position:relative; margin-bottom:2em; }
    .pass-row{ display:flex; align-items:center; justify-content:space-between; gap:.5em; flex-wrap:nowrap; }
    .pass{ margin:0; flex:1 1 auto; max-width:none; }
    .copy-btn{ padding:.35em .6em; border:0px; background:#dadada; color:#666; border-radius:6px; font-size:.78em; line-height:1; cursor:pointer; white-space:nowrap; align-self:center; transition: background .2s ease, color .2s ease, transform .06s ease, box-shadow .2s ease; }
.copy-btn:hover{ background:var(--accent); color:#fff; }
    .notice-banner{ margin:0 0 1rem; padding:.75em 1em; border:1px solid #ffd166; background:#fff8e6; color:#6b4b16; border-radius:6px; }
    @media (prefers-color-scheme:dark){ .notice-banner{ border-color:#c79b2a; background:#3a2f1a; color:#ffe3a3; } }
    .copy-btn:active, .copy-btn.copied{ transform: none; }
    .pass { font-family:courier-std, monospace; font-weight:700; cursor:pointer; display:inline-block; transition:transform .1s; color:inherit; word-break: break-all;overflow-wrap: break-word;white-space: pre-wrap;line-height: 1.25em;}
    .password-text:active { transform: scale(0.99); transition: transform 0.1s ease; }
    @keyframes click-feedback { 0%{transform:scale(1);}50%{transform:scale(0.9);}100%{transform:scale(1);} }
    .pass.clicked { animation:click-feedback 0.3s ease; }
    .password-item::after{ content:none; }
    .strength-container { position:relative; width:100%; height:5px; background:var(--line-soft); border-radius:2px; overflow:hidden; margin-top: 1em; }
    .password-strength-bar { height:100%; width:0; transition:width .3s ease, background-color .3s ease; }
    .divider { position:absolute; top:0; bottom:0; width:2px; background:#fff; }
    .divider-1 { left:20%; }
    .divider-2 { left:40%; }
    .divider-3 { left:60%; }
    .divider-4 { left:80%; }
    .strength-line{ display:flex; align-items:center; gap:.5em; margin:.5em 0 0; font-size:.9em; }
    .strength-chip{ display:inline-flex; align-items:center; padding:.15em .45em; border-radius:8px; background:#eef6da; color:#4c6b17; border:1px solid var(--accent-a-50); font-weight:600; letter-spacing:.02em; }
    .strength-chip.s1{ background:var(--chip1-bg); color:var(--chip1-ink); border-color:var(--chip1-border); }
    .strength-chip.s2{ background:var(--chip2-bg); color:var(--chip2-ink); border-color:var(--chip2-border); }
    .strength-chip.s3{ background:var(--chip3-bg); color:var(--chip3-ink); border-color:var(--chip3-border); }
    .strength-chip.s4{ background:var(--chip-strong-bg); color:var(--chip-strong-ink); border-color:var(--accent-a-50); }
    .strength-chip.s5{ background:var(--chip-strong-bg); color:var(--chip-strong-ink); border-color:var(--accent-a-50); }
    .strength-value{ font-weight:700; }
    .strength-value.s1{ color:var(--strength-1); }
    .strength-value.s2{ color:var(--strength-2); }
    .strength-value.s3{ color:var(--strength-3); }
    .strength-value.s4, .strength-value.s5{ color:var(--strength-4); }
    .settings-panel { position:fixed; top:0; left:0; right:0; bottom:0; /*background:#fff;*/ display:flex; justify-content:center; align-items:center; z-index:10; padding:16px; overflow:auto; }
    .settings-panel { -webkit-overflow-scrolling: touch; }
    .settings-panel:not(.hidden){ background:var(--panel-bg); }
    .settings-panel.hidden { display:none; }
    .settings-panel .box2 { background:var(--panel-bg); color:#333; max-width:480px; width:90%; max-height:none; overflow:visible; }
    @supports (padding: env(safe-area-inset-bottom)){
      .settings-panel{ padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
    }
    .form-group { display:flex; align-items:center; gap:.75em; margin-bottom:1em; }
    .label { white-space:nowrap; color:inherit; display:inline-block; margin-right:.5em; flex-shrink:0; }
    .label--placeholder { visibility:hidden; }
    .input { width:100%; padding:.5em; font-size:1em; line-height:1.5; color:#495057; background:#fff; border:1px solid var(--line); border-radius:4px; transition:border-color .15s, box-shadow .15s; min-width:0; box-sizing:border-box; max-width:100%; min-height:44px; }
    .range{width:100%;margin-top:.4em;}
    .range:focus{outline:none}
    input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:linear-gradient(90deg,var(--per_cl,var(--accent)),var(--accent));border-radius:6px;outline:none;cursor:pointer;}
    input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--per_cl,var(--accent));border-radius:50%;border:2px solid #fff;box-shadow:0 0 2px rgba(0,0,0,0.2);transition:background 0.3s ease,transform 0.2s ease;}
    input[type=range]::-webkit-slider-thumb:hover{background:var(--accent);transform:scale(1.1);}
    input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--per_cl,var(--accent));border-radius:50%;border:2px solid #fff;box-shadow:0 0 2px rgba(0,0,0,0.2);transition:background 0.3s ease,transform 0.2s ease;}
    input[type=range]::-moz-range-thumb:hover{background:var(--accent);transform:scale(1.1);}
    input[type=range]::-moz-range-track{height:6px;background:linear-gradient(90deg,var(--per_cl,var(--accent)),var(--accent));border-radius:6px;}
    input[type=range]:focus::-webkit-slider-thumb{outline:none;}
    input[type=range]:focus::-moz-range-thumb{outline:none;}
    input[type=range]::-ms-thumb{width:16px;height:16px;background:var(--per_cl,var(--accent));border-radius:50%;border:2px solid #fff;box-shadow:0 0 2px rgba(0,0,0,0.2);transition:background 0.3s ease,transform 0.2s ease;}
    input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:linear-gradient(90deg,var(--per_cl,var(--accent)),var(--accent));border-radius:6px;}
    input[type=range]::-ms-tooltip{display:none;}
    :root{--per_cl: var(--accent);}

select.input{-webkit-appearance:none;appearance:none;line-height:1.5;padding:.5em 2.2em .5em .75em;min-height:44px;background-color:#fff;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path fill="none" stroke="%23495057" stroke-width="2" d="M1 1l5 5 5-5"/></svg>');background-repeat:no-repeat;background-position:right .75em center;background-size:12px 8px;}

    .input:focus { outline:none; border-color:#80bdff; box-shadow:0 0 0 .2rem rgba(0,123,255,.25); }
.btn {font-size:.9em; width:100%; padding:.5em; border:2px solid var(--accent); border-radius:4px; background:#fff; color:var(--accent); cursor:pointer; transition:background .3s, color .3s; }
.btn:hover { background:var(--accent); color:#fff; }

    .download-wrap{text-align:center;margin:0 0 1.2em;}
    .download-link{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;border:0px solid var(--per_cl);border-radius:6px;background:#fff;color:var(--per_cl);text-decoration:none;font-size:0.9em;line-height:1;transition:background .2s ease,color .2s ease,transform .06s ease,box-shadow .2s ease;}
    .download-link:hover{background:var(--per_cl);color:#fff;}
    .download-link:active{transform:translateY(1px);}
    .download-link:focus-visible{outline:none;box-shadow:0 0 0 .2rem var(--accent-a-35);}
    .download-link .dl-icn{flex-shrink:0;display:inline-block;}
#settings-close{ background:var(--accent); color:#fff; border-color:var(--accent); }
#settings-close:hover{ background:#fff; color:var(--accent); }
    .radio-input, .checkbox-input { display:none; }
    .radio-group, .checkbox-group { display:flex; gap:1em; flex-wrap:wrap; }
    .radio-label, .checkbox-label { position:relative; padding-left:30px; cursor:pointer; }
.radio-label::before, .checkbox-label::before { content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:18px; height:18px; border:2px solid var(--accent); background:#fff; transition:background .3s, border-color .3s; }
    .radio-label::before { border-radius:50%; }
.radio-input:checked+.radio-label::before { background:var(--accent); }
    .checkbox-label::before { border-radius:4px; }
.checkbox-input:checked+.checkbox-label::before { background:var(--accent); }

.site-footer{position:relative;text-align:center;font-size:0.75em;padding:1.8em 1em 1.2em;background:var(--footer-bg);color:var(--footer-fg);border-top: 4px #231815 solid;}
    .site-footer a{color:inherit;text-decoration:none;}
.footer-logo{position:absolute;left:clamp(12px,3vw,24px);top:0;transform:translate(0,-100%);width:90px;height:auto;display:block;margin:0;pointer-events:auto;cursor:pointer;}
    .footer-logo img{display:block;width:100%;height:auto;}
    .site-footer a:hover{text-decoration:underline;}
    
@media (max-width:768px){
  h2{margin-top:2em;}
  .form-group { flex-direction:column; align-items:stretch; gap:.5em; } .form-group .label { margin:0; }
  .box{padding-top:0;}
  .box2{padding:1.5em;}
  .pass-row{flex-direction:column;align-items:stretch;gap:0.5em;}
  .copy-btn{align-self:flex-end;font-size:0.85em;padding:0.5em 1em;}
  .settings-panel .box2{ width:100%; max-width:none;height: 100vh;}
  .settings-container + .password-item { margin-top: 1.5rem; }
  .footer-logo{left:29px;width:60px;}
}

.settings-close-top{display:none;padding:.5em .7em;border:2px solid var(--accent);background:var(--accent);color:#fff;border-radius:6px;line-height:1;min-width:0;width:auto;}
    .settings-open .settings-close-top{ display:inline-flex; }
    .settings-close-top:hover{ background:transparent; color:var(--accent); }

@media (prefers-color-scheme:dark) {
  :root{
    --bg:#333;
    --panel-bg:#333;
    --fg:#ddd;
    --banner-bg:rgba(30,30,30,.92);
    --banner-fg:#eee;
    --line-2: #999;
    --line-soft: #555;
    --panel-2: #222;
    --chip-strong-bg: #2b361c;
    --chip-strong-ink: #c4e08a;
    --chip1-bg:#3a2121; --chip1-ink:#ffb3b3; --chip1-border:rgba(255,38,38,.6);
    --chip2-bg:#3a2621; --chip2-ink:#ffb99f; --chip2-border:rgba(255,107,45,.6);
    --chip3-bg:#3a361f; --chip3-ink:#ffe9b3; --chip3-border:rgba(255,183,51,.6);
    --footer-bg:#7a6a3a; --footer-fg:#ccc;
  }
  body{background:var(--bg);color:var(--fg);} .box{background:transparent;} .box2{background:var(--panel-bg);color:var(--fg);} .settings-panel .box2{background:var(--panel-2);color:var(--fg);} .pass::after{background:rgba(158,214,54,.9);} .strength-container{background:var(--line-soft);} .divider{background:var(--panel-bg);} .input{background:var(--panel-2);border-color:var(--line-2);color:var(--fg);} .input:focus{box-shadow:0 0 0 .2rem rgba(158,214,54,.5);} .btn{background:var(--bg);color:var(--accent);border-color:var(--accent);} .btn:hover{background:var(--accent);color:var(--bg);} .radio-label::before, .checkbox-label::before{background:var(--bg);border-color:var(--accent);}
  #settings-close{ background:var(--accent); color:var(--bg); border-color:var(--accent); }
  #settings-close:hover{ background:var(--bg); color:var(--accent); }
  .settings-button{background:var(--accent);color:var(--bg);border-color:var(--accent);}
  .settings-button:hover{background:var(--bg);color:var(--accent);}
  .settings-button:focus-visible{box-shadow:0 0 0 .2rem var(--accent-a-35);}
  .settings-panel:not(.hidden){ background:var(--panel-2); }
  .copy-btn{ background:var(--panel-2); color:#bbb; border-color:var(--line-2); }
  .copy-btn:hover{ background:var(--accent); color:#fff; }
  .settings-close-top{ background:var(--accent); color:var(--bg); border-color:var(--accent); width:auto; }
  .settings-close-top:hover{ background:var(--bg); color:var(--accent); }
  .strength-chip{ background:#2f3a1f; color:#cfe89a; border-color:var(--accent-a-60); }
  .strength-chip.s1{ background:var(--chip1-bg); color:var(--chip1-ink); border-color:var(--chip1-border); }
  .strength-chip.s2{ background:var(--chip2-bg); color:var(--chip2-ink); border-color:var(--chip2-border); }
  .strength-chip.s3{ background:var(--chip3-bg); color:var(--chip3-ink); border-color:var(--chip3-border); }
  .strength-chip.s4{ background:var(--chip-strong-bg); color:var(--chip-strong-ink); border-color:var(--accent-a-60); }
  .strength-chip.s5{ background:var(--chip-strong-bg); color:var(--chip-strong-ink); border-color:var(--accent-a-60); }
  .strength-value.s2{ color:var(--strength-2); }
  .strength-value.s3{ color:var(--strength-3); }
  .strength-value.s4{ color:var(--strength-4); }
  .site-footer{background:var(--footer-bg);color:var(--footer-fg);}
   select.input{background-color:var(--panel-2);border-color:var(--line-2);color:var(--fg);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path fill="none" stroke="%23dddddd" stroke-width="2" d="M1 1l5 5 5-5"/></svg>');background-repeat:no-repeat;background-position:right .75em center;background-size:12px 8px;}
  .download-link{ background:var(--bg); color:var(--accent); border:0; border-color:var(--accent); }
  .download-link:hover{ background:var(--accent); color:var(--bg); }
  .download-link:focus-visible{ box-shadow: 0 0 0 .2rem var(--accent-a-50); }
}