/* tenkokuma 篆刻間 — interface alignée sur shonoma (iki / ji) :
   le papier domine, hiérarchie par l'espacement, aucune couleur qui ne soit fonctionnelle
   (le vermillon reste réservé au sceau lui-même), angles vifs, panneau à droite. */
:root{
  --papier:#f6f3ec;--fond-panneau:#fbf9f4;--encre:#161310;--discret:#8b8378;
  --trait:rgba(22,19,16,.12);--trait-fort:rgba(22,19,16,.32);
  /* alias conservés pour les anciens sélecteurs */
  --pan:var(--fond-panneau);--pan3:var(--papier);--pan4:var(--papier);--brd:var(--trait);
  --tx:var(--encre);--txm:var(--discret);--txd:var(--discret);--wh:var(--encre);
  --ac:var(--encre);--acd:var(--encre);--acdim:var(--papier);
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif TC","Noto Serif SC",serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--papier);color:var(--encre);font-family:var(--serif);height:100vh;display:flex;overflow:hidden;-webkit-font-smoothing:antialiased;letter-spacing:.02em;}
.panel{order:2;width:40vw;max-width:440px;min-width:340px;height:100vh;overflow-y:auto;display:flex;flex-direction:column;background:var(--fond-panneau);border-left:1px solid var(--trait);flex-shrink:0;}
.preview-area{order:1;}
.logo{padding:26px 26px 4px;display:flex;align-items:baseline;gap:10px;}
.logo-kanji{font-size:1.35rem;font-weight:400;letter-spacing:.18em;color:var(--encre);}
.logo-latin{font-size:.8rem;font-weight:400;letter-spacing:.22em;color:var(--discret);}
.logo-sub{padding:0 26px 16px;font-size:.66rem;color:var(--discret);letter-spacing:.16em;text-transform:uppercase;}
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:0 26px 18px;gap:8px;}
.lang-group{display:flex;gap:.9rem;}
.tool-group{display:flex;gap:4px;}
.lb{background:none;border:0;border-bottom:1px solid transparent;color:var(--discret);padding:.1rem 0;font-size:.72rem;letter-spacing:.12em;cursor:pointer;font-family:var(--serif);transition:color .25s,border-color .25s;white-space:nowrap;}
.lb:hover{color:var(--encre);}
.lb.sel{color:var(--encre);border-color:var(--encre);}
.tb{background:none;border:1px solid var(--trait-fort);color:var(--encre);width:30px;height:30px;padding:0;font-size:.95rem;line-height:1;cursor:pointer;font-family:var(--serif);transition:background .25s,color .25s;}
.tb:hover,.tb.copied{background:var(--encre);color:var(--papier);}
.panel-body{flex:1;padding:0;}
.sec{padding:22px 26px 24px;border-top:1px solid var(--trait);}
.sh{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;}
.sn{font-size:.62rem;color:var(--discret);letter-spacing:.1em;font-family:var(--serif);flex-shrink:0;}
.st{font-size:.66rem;font-weight:400;color:var(--discret);letter-spacing:.16em;text-transform:uppercase;}
.text-row{display:flex;gap:6px;align-items:stretch;}
.text-row input[type="text"]{flex:1;}
.btn-rnd-text{background:none;border:1px solid var(--trait-fort);color:var(--encre);padding:0 12px;font-size:.95rem;cursor:pointer;font-family:var(--serif);transition:background .25s,color .25s;flex-shrink:0;}
.btn-rnd-text:hover{background:var(--encre);color:var(--papier);}
input[type="text"]{background:var(--papier);border:1px solid var(--trait-fort);color:var(--encre);padding:10px 12px;font-size:1.5rem;font-family:var(--serif);text-align:center;letter-spacing:.15em;outline:none;width:100%;}
input[type="text"]:focus{border-color:var(--encre);}
input[type="text"]::placeholder{color:var(--discret);font-size:.8rem;letter-spacing:.06em;}
.input-hint{font-size:.66rem;color:var(--discret);text-align:center;margin-top:5px;letter-spacing:.06em;}
select{background:var(--papier);border:1px solid var(--trait-fort);color:var(--encre);padding:8px 30px 8px 10px;font-size:.82rem;font-family:var(--serif);cursor:pointer;outline:none;width:100%;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b8378'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
select:focus{border-color:var(--encre);}
select optgroup{font-style:normal;font-weight:400;color:var(--discret);background:var(--fond-panneau);}
select option{font-weight:400;color:var(--encre);background:var(--fond-panneau);}
button{background:none;border:1px solid var(--trait-fort);color:var(--encre);padding:7px 10px;font-size:.78rem;font-family:var(--serif);cursor:pointer;outline:none;transition:background .25s,color .25s,border-color .25s;letter-spacing:.04em;}
button:hover{background:var(--encre);color:var(--papier);border-color:var(--encre);}
.br{display:flex;gap:0;}
.br button{flex:1;text-align:center;font-size:.76rem;padding:7px 4px;margin-left:-1px;}
.br button:first-child{margin-left:0;}
.br button.sel{background:var(--encre);color:var(--papier);border-color:var(--encre);position:relative;z-index:1;}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--trait-fort);outline:none;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;background:var(--encre);border-radius:50%;cursor:pointer;}
input[type="range"]::-moz-range-thumb{width:11px;height:11px;background:var(--encre);border:0;border-radius:50%;cursor:pointer;}
.rr{display:flex;align-items:center;gap:10px;}
.rr input[type="range"]{flex:1;}
.rl{font-size:.74rem;color:var(--discret);min-width:60px;}
.rv{font-size:.7rem;color:var(--discret);min-width:32px;text-align:right;font-variant-numeric:tabular-nums;}
.cr{display:flex;align-items:center;gap:10px;}
input[type="color"]{-webkit-appearance:none;appearance:none;width:32px;height:32px;border:1px solid var(--trait-fort);cursor:pointer;padding:0;background:none;}
input[type="color"]::-webkit-color-swatch-wrapper{padding:2px;}
input[type="color"]::-webkit-color-swatch{border:none;}
.ch{font-size:.7rem;color:var(--discret);font-variant-numeric:tabular-nums;letter-spacing:.04em;}
.fd{border:1px dashed var(--trait-fort);padding:12px;text-align:center;font-size:.74rem;color:var(--discret);cursor:pointer;transition:border-color .25s,color .25s;}
.fd:hover{border-color:var(--encre);color:var(--encre);}
.ml{display:flex;flex-direction:column;gap:2px;max-height:90px;overflow-y:auto;}
.mi{display:flex;align-items:center;gap:6px;padding:5px 8px;cursor:pointer;font-size:.76rem;transition:background .15s;}
.mi:hover{background:var(--papier);}
.mi.sel{background:var(--encre);color:var(--papier);}
.mi .rm{margin-left:auto;opacity:.45;font-size:.8rem;}
.mi .rm:hover{opacity:1;}
.cbr{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.8rem;color:var(--encre);}
.cbr input[type="checkbox"]{accent-color:var(--encre);width:14px;height:14px;}
.eb{display:flex;gap:6px;}
.eb button{flex:1;padding:12px;font-weight:400;font-size:.78rem;letter-spacing:.16em;background:none!important;border:1px solid var(--encre)!important;color:var(--encre)!important;}
.eb button:hover{background:var(--encre)!important;color:var(--papier)!important;}
.color-pair{display:flex;gap:20px;align-items:flex-start;}
.color-block{display:flex;flex-direction:column;gap:4px;}
.color-label{font-size:.68rem;color:var(--discret);letter-spacing:.08em;}
.mask-sub{font-size:.7rem;color:var(--discret);margin-bottom:8px;line-height:1.7;}
.mask-controls{display:flex;flex-direction:column;gap:8px;}
.panel-footer{padding:16px 26px;border-top:1px solid var(--trait);text-align:center;font-size:.66rem;color:var(--discret);letter-spacing:.08em;line-height:1.6;}
.panel-footer a{color:var(--discret);text-decoration:none;border-bottom:1px solid var(--trait-fort);}
.panel-footer a:hover{color:var(--encre);border-color:var(--encre);}
.preview-area{flex:1;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5vh;position:relative;overflow:hidden;transition:background-color .3s;}
.pw{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;}
#cvs{image-rendering:auto;}
.gallery{position:absolute;bottom:0;left:0;right:0;height:130px;z-index:2;display:flex;align-items:center;gap:14px;padding:0 24px;overflow-x:auto;background:linear-gradient(transparent,rgba(246,243,236,.9));}
.gallery canvas{height:95px;cursor:pointer;transition:transform .15s;flex-shrink:0;border:1px solid var(--trait);}
.gallery canvas:hover{transform:scale(1.08);}
.gallery.hidden{display:none;}
.welcome{position:relative;z-index:1;max-width:600px;padding:40px 50px;text-align:center;margin-top:6vh;}
.welcome h2{font-size:4.2rem;font-weight:300;color:var(--encre);letter-spacing:.2em;margin-bottom:4px;}
.welcome .wlat{font-size:.95rem;color:var(--discret);margin-bottom:6px;letter-spacing:.26em;}
.welcome .wsub{font-size:.72rem;color:var(--discret);margin-bottom:40px;letter-spacing:.14em;text-transform:uppercase;}
.welcome .wstep{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;text-align:left;}
.welcome .wnum{width:1.6em;flex-shrink:0;margin-top:2px;font-size:.72rem;color:var(--discret);letter-spacing:.08em;text-align:right;}
.welcome .wtxt{font-size:.9rem;color:var(--encre);line-height:1.9;}
.welcome .wtxt b{font-weight:400;border-bottom:1px solid var(--trait-fort);}
.welcome .wnote{margin-top:28px;padding-top:20px;border-top:1px solid var(--trait);font-size:.74rem;color:var(--discret);line-height:1.9;text-align:left;}
.welcome .wnote b{color:var(--encre);font-weight:400;}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--trait-fort);}

/* ── Bibliothèque de kanji ── */
.lib-toggle{display:block;margin-top:8px;font-size:.7rem;color:var(--discret);cursor:pointer;text-align:center;transition:color .2s;border:none;background:none;width:100%;padding:4px 0;font-family:var(--serif);letter-spacing:.1em;}
.lib-toggle:hover{color:var(--encre);background:none;}
.lib-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--papier);border:1px solid transparent;margin-top:6px;}
.lib-panel.open{max-height:320px;overflow-y:auto;border-color:var(--trait);}
.lib-cat,.lib-sub,.lib-item{padding:0;margin:0;list-style:none;}
.lib-cat-head,.lib-sub-head{display:flex;align-items:center;gap:6px;padding:8px 12px;cursor:pointer;font-size:.76rem;color:var(--encre);transition:background .15s;user-select:none;}
.lib-cat-head{border-bottom:1px solid var(--trait);letter-spacing:.06em;}
.lib-cat-head:hover,.lib-sub-head:hover{background:var(--fond-panneau);}
.lib-sub-head{padding-left:24px;color:var(--discret);font-size:.72rem;}
.lib-arrow{font-size:9px;transition:transform .2s;color:var(--discret);width:10px;text-align:center;flex-shrink:0;}
.lib-arrow.open{transform:rotate(90deg);}
.lib-sub{display:none;}
.lib-sub.open{display:block;}
.lib-items{display:none;padding:0;}
.lib-items.open{display:block;}
.lib-item{padding:5px 12px 5px 38px;cursor:pointer;font-size:.76rem;color:var(--discret);transition:background .15s,color .15s;display:flex;gap:8px;align-items:baseline;}
.lib-item:hover{background:var(--encre);color:var(--papier);}
.lib-item:hover .lib-item-seal,.lib-item:hover .lib-item-full,.lib-item:hover .lib-item-r,.lib-item:hover .lib-item-desc{color:var(--papier);}
.lib-item-seal{color:var(--encre);font-size:.95rem;min-width:2.5em;}
.lib-item-full{font-size:.7rem;color:var(--discret);}
.lib-item-r{font-size:.66rem;color:var(--discret);font-style:italic;}
.lib-item-desc{font-size:.66rem;color:var(--discret);}
.lib-cat-count{font-size:.6rem;color:var(--discret);margin-left:auto;}

/* ── Bouton d'inversion (usure / forme) ── */
.btn-inv{background:none;border:1px solid var(--trait-fort);color:var(--discret);padding:4px 10px;font-size:.7rem;cursor:pointer;font-family:var(--serif);transition:background .25s,color .25s;margin-left:auto;flex-shrink:0;letter-spacing:.08em;}
.btn-inv:hover{background:var(--encre);color:var(--papier);}
.btn-inv.active{background:var(--encre);color:var(--papier);border-color:var(--encre);}
.mask-apply-row{display:flex;align-items:center;gap:8px;}

@media (max-width:52rem){
  body{flex-direction:column;overflow:auto;height:auto;}
  .panel{order:2;width:100%;max-width:none;min-width:0;height:auto;border-left:0;border-top:1px solid var(--trait);}
  .preview-area{order:1;height:auto;min-height:60vh;padding-top:2vh;}
}