/* ===========================================================
   PabloOS — kit de interface retrô compartilhado
   Usado por todos os apps em /apps (paint, jogos, ...)
   =========================================================== */
:root{
  --face:#c0c0c0; --face2:#d4d0c8; --hi:#ffffff; --lt:#dfdfdf; --sh:#808080; --dk:#000000;
  --nav1:#000080; --nav2:#1084d0; --navi1:#808080; --navi2:#b5b5b5;
  --sel:#000080; --desk:#008080;
  --ui:"Tahoma","MS Sans Serif",Verdana,Geneva,sans-serif;
  --mono:"VT323","Lucida Console",monospace;
  --px:"Press Start 2P",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:var(--ui);font-size:12px;color:#000;background:var(--face);
  -webkit-font-smoothing:none;overflow:hidden;cursor:default;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
svg{display:block;} img{display:block;}
.pxf{font-family:var(--px);} .mono{font-family:var(--mono);font-size:17px;}
.crisp{shape-rendering:crispEdges;image-rendering:pixelated;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- biséis ---------- */
.out{border:2px solid;border-color:var(--lt) var(--dk) var(--dk) var(--lt);
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh);}
.in{border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk),inset -1px -1px 0 var(--lt);}

/* ---------- controles ---------- */
.b95{background:var(--face);border:2px solid;border-color:var(--lt) var(--dk) var(--dk) var(--lt);
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh);
  padding:6px 14px;font-family:var(--ui);font-size:12px;color:#000;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;}
.b95:active,.b95.on{border-color:var(--dk) var(--lt) var(--lt) var(--dk);
  box-shadow:inset 1px 1px 0 var(--sh);padding:7px 13px 5px 15px;}
.b95:disabled{color:var(--sh);text-shadow:1px 1px 0 var(--hi);cursor:default;}
.b95.big{font-weight:bold;padding:10px 20px;}
.fld{background:#fff;border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk),inset -1px -1px 0 var(--lt);
  padding:5px 7px;font-family:var(--ui);font-size:12px;}
select.fld{padding:4px;}

/* ---------- janela do app ---------- */
.app{height:100%;display:flex;flex-direction:column;background:var(--face);}
.tbar{height:26px;flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:0 4px;
  background:linear-gradient(90deg,var(--nav1),var(--nav2));color:#fff;user-select:none;}
.tbar b{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tbar svg{width:16px;height:16px;flex:0 0 16px;}
.tbtns{display:flex;gap:2px;}
.tbtn{width:19px;height:17px;background:var(--face);border:2px solid;
  border-color:var(--lt) var(--dk) var(--dk) var(--lt);
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh);
  display:grid;place-items:center;cursor:pointer;padding:0;}
.tbtn svg{width:9px;height:9px;stroke:#000;stroke-width:1.4;fill:none;}
body.embed .tbar{display:none;}

.menubar{flex:0 0 auto;display:flex;gap:2px;padding:2px 3px;background:var(--face);
  border-bottom:1px solid var(--sh);position:relative;z-index:5;}
.menubar>span{padding:3px 9px;font-size:11.5px;cursor:pointer;position:relative;}
.menubar>span:hover,.menubar>span.on{background:var(--sel);color:#fff;}
.menubar u{text-decoration:underline;}
.menu{position:absolute;top:100%;left:0;min-width:168px;background:var(--face);display:none;
  border:2px solid;border-color:var(--lt) var(--dk) var(--dk) var(--lt);
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh),3px 3px 0 rgba(0,0,0,.3);
  padding:3px;z-index:20;}
.menubar>span.on .menu{display:block;}
.menu i{display:flex;justify-content:space-between;gap:20px;font-style:normal;
  padding:6px 10px;color:#000;font-size:12px;}
.menu i:hover{background:var(--sel);color:#fff;}
.menu i small{color:var(--sh);} .menu i:hover small{color:#dcdcdc;}
.menu hr{border:0;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);margin:3px 4px;}

.stage{flex:1 1 auto;min-height:0;position:relative;display:flex;overflow:hidden;}
.sbar{flex:0 0 auto;display:flex;gap:3px;padding:3px;background:var(--face);border-top:1px solid var(--lt);}
.sbar div{border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);
  padding:3px 8px;font-size:11px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sbar div:first-child{flex:1;}

/* ---------- diálogo ---------- */
.dlg{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);width:min(320px,90vw);
  z-index:200;display:none;background:var(--face);
  border:2px solid;border-color:var(--lt) var(--dk) var(--dk) var(--lt);
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh),4px 4px 0 rgba(0,0,0,.35);}
.dlg.on{display:block;animation:dlgIn .16s cubic-bezier(.2,.9,.3,1.4);}
@keyframes dlgIn{from{transform:translate(-50%,-50%) scale(.85);opacity:0;}}
.dlg .row{display:flex;gap:14px;align-items:flex-start;padding:20px 18px 14px;}
.dlg .row>svg{flex:0 0 32px;width:32px;height:32px;}
.dlg p{font-size:12.5px;line-height:1.6;}
.dlg .btns{display:flex;justify-content:center;gap:9px;padding:0 18px 18px;}
.dlg .btns .b95{min-width:84px;}

/* ---------- utilidades ---------- */
.pad{padding:10px;}
.center{display:grid;place-items:center;}
.blink{animation:blink 1.06s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}